Почему я не могу нарисовать прямоугольник на своем холсте HTML5? - PullRequest
1 голос
/ 29 марта 2012

Я пытаюсь нарисовать красный прямоугольник на моем холсте HTML5. Вот мой HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset=utf-8>
    <title>My Canvas Experiment</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <script src="plotting.js"></script>
    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
      </script>
    <![endif]-->
  </head>
  <body>
    <canvas id="plot"></canvas>
  </body>
</html>

Вот заговор.js:

document.onload = function() {
    var c = document.getElementById("plot");
    var ctx = c.getContext("2d");
    ctx.fillStyle("#f00");
    ctx.fillRect(0, 0, 175, 40);
}

Вот main.css:

body { margin:100px; }

article, aside, figure, footer, header, hgroup, menu, nav, section { 
    display:block;
}

#plot {
    width: 500px;
    height: 400px;
}

Почему страница пуста? Консоль Chrome Web Developer не выдает ошибок.

Ответы [ 2 ]

7 голосов
/ 29 марта 2012

Заменить:

ctx.fillStyle("#f00");

с:

ctx.fillStyle="#f00";

5 голосов
/ 29 марта 2012

Используйте window.onload вместо document.onload (с учетом предложения @ stewe).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...