HTML5 Canvas Grid не рендерится - PullRequest
2 голосов
/ 06 ноября 2011

Этот вопрос крайне зачаточен, но я только начинаю с "HTML5 Up and Running" и, похоже, не могу отобразить мою сетку холста. Ниже приведен код. Спасибо за вашу помощь.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas | HTML5</title>
<style type="text/css">
#c {border:1px solid #000;}
</style>
<script type="text/javascript">


function draw_grid() {
    var c_canvas = document.getElementById("c");
    var context = c_canvas.getContext("2d");

    for (var x = 0.5; x < 500; x += 10) {
    context.moveTo(x, 0);
    context.lineTo(x, 375);
    }

    for (var y = 0.5; y < 375; y += 10) {
    context.moveTo(0, y);
    context.lineTo(500, y);
    }

    context.strokeStyle = "#eee";
    context.stroke();
}
draw_grid();


</script>

</head>

<body>
<canvas id="c" width="300" height="225"></canvas>
</body>
</html>

Ответы [ 2 ]

3 голосов
/ 06 ноября 2011

ваш HTML не готов, когда вы выполняете JS ...

Поместите ваш скрипт-тег после холста, и он должен работать:

http://jsfiddle.net/vQE3f/1/

В вашем коде, когда JS выполняет document.getElementById("c");, браузер не знает, что существует холст с идентификатором C ,,,

1 голос
/ 21 августа 2012

Я только что запустил проект на GitHub для этой проблемы.Она называется grid.js .

Вам не нужно беспокоиться о рисовании сетки.Может быть, вы попробуете.

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