Javascript 为什么HTML5画布在脚本放在head标记中时不绘制？
使用HTMLJavascript 为什么HTML5画布在脚本放在head标记中时不绘制？,javascript,html,canvas,Javascript,Html,Canvas,使用HTML画布绘制图形时，将放在文档的中不起作用。例如： <head> <script> var canvas = document.getElementById("myCanvas"); if(canvas.getContext("2d")) var ctx = canvas.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200
画布绘制图形时，将
放在文档的
中不起作用。例如：
<head>
<script>
var canvas = document.getElementById("myCanvas");
if(canvas.getContext("2d"))
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
</body>
var canvas=document.getElementById（“myCanvas”）；
if（canvas.getContext（“2d”））
var ctx=canvas.getContext（“2d”）；
ctx.moveTo（0,0）；
ctx.lineTo（200100）；
ctx.stroke（）；
您的浏览器不支持画布元素。
但是当
放在
中时，您确实会得到预期的结果。既然您可以将
放在
中的任何位置，那么为什么这不适用于画布
？提前谢谢 您的HTML尚未呈现，因此
document.getElementById（“myCanvas”）
找不到myCanvas元素。然而，如果将代码放在后面，则会呈现HTML，因此它能够找到它
如果要将其放置在头部，请在文档加载时使用事件来呈现它，以便它在呈现HTML后执行
检查此代码：
document.addEventListener（“DOMContentLoaded”），函数（事件）{
var canvas=document.getElementById（“myCanvas”）；
if（canvas.getContext（“2d”））
var ctx=canvas.getContext（“2d”）；
ctx.moveTo（0,0）；
ctx.lineTo（200100）；
ctx.stroke（）；
});
您的浏览器不支持画布元素。
DOM尚未加载，您应该将脚本放入“OnDOMContentLoaded”事件的回调函数中
或者您可以将脚本放在正文的末尾，这是因为您试图在画布元素存在于DOM之前访问它。将代码放在窗口中。onload
或加载画布后，或将其放在HTML中的DOM元素（正文末尾的脚本）后。我已将代码放在$（document.ready（function（）{//code}）中。仍然不工作我已经用代码更新了。您还可以检查此代码笔：如果您使用的是jquery，请确保在脚本之前初始化jquery。
document.addEventListener("DOMContentLoaded", function(event) {
//your script
});