将脚本放在head标签内时，为什么HTML5 Canvas无法绘制？

Question

在将<script>放入文档的<head>中时，使用HTML canvas绘制图形时不起作用。 例如：

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

但是，将<script>放在<body>内时，确实可以得到预期的结果。 由于您可以将<script>放在<head>内的任何位置，那么为什么不能在canvas呢？ 提前致谢！

Answer 1

您的HTML尚未呈现，因此document.getElementById（“ myCanvas”）找不到myCanvas元素。 而如果您将代码放置在其后，则将呈现HTML，因此可以找到它。

如果要将其放在头部，请在文档加载时使用一个事件来呈现它，以便它在呈现HTML之后执行。

检查此代码：

 <head> <script> document.addEventListener("DOMContentLoaded", function(event) { 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>

Answer 2

DOM尚未加载，您应该将脚本放入“ OnDOMContentLoaded”事件的回调函数中

document.addEventListener("DOMContentLoaded", function(event) {
    //your script
});

或者您可以将脚本放在正文的末尾

将脚本放在head标签内时，为什么HTML5 Canvas无法绘制？

问题描述

2 个解决方案

解决方案1
3 已采纳 2017-01-28 17:18:01

解决方案2
1 2017-01-28 17:20:16

将脚本放在head标签内时，为什么HTML5 Canvas无法绘制？

问题描述

2 个解决方案

解决方案1 3 已采纳 2017-01-28 17:18:01

解决方案2 1 2017-01-28 17:20:16

解决方案1
3 已采纳 2017-01-28 17:18:01

解决方案2
1 2017-01-28 17:20:16