Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/72.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
HTML5画布网格未渲染_Html_Canvas_Grid - Fatal编程技术网
Fatal编程技术网
  • html/
  • HTML5画布网格未渲染

HTML5画布网格未渲染

html canvas grid

HTML5画布网格未渲染,html,canvas,grid,Html,Canvas,Grid,这个问题非常简单，但我只是从“HTML5启动并运行”开始，似乎无法让我的画布网格进行渲染。下面是代码。谢谢你的帮助 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Canvas | HTML5</title> <style type="text/css"> #c {border:1px solid #000;} </

这个问题非常简单，但我只是从“HTML5启动并运行”开始，似乎无法让我的画布网格进行渲染。下面是代码。谢谢你的帮助

<!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>


画布| HTML5
#c{边框：1px实心#000；}
函数draw_grid（）{
var c_canvas=document.getElementById（“c”）；
var context=c_canvas.getContext（“2d”）；
对于（var x=0.5；x<500；x+=10）{
moveTo（x，0）；
lineTo（x，375）；
}
对于（变量y=0.5；y<375；y+=10）{
上下文。移动到（0，y）；
lineTo（500，y）；
}
context.strokeStyle=“#eee”；
stroke（）；
}
绘制网格（）；
执行JS时，您的HTML尚未准备就绪

将脚本标记放在画布之后，它应该可以工作：

当JS执行
document.getElementById（“c”）时在代码中浏览器不知道有一个id为C、、、
的画布，我刚刚在GitHub上启动了一个项目来解决这个问题。它叫


您不必担心绘制网格。也许你会尝试一下。
或者，你可以做
window.onload=draw\u grid或（当您有更多代码时）
window.onload=function（）{…处理页面…}