Question

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

<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（＆＃34; myCanvas＆＃34）找不到myCanvas元素。然而，如果您将代码放在后面，则会呈现HTML，因此可以找到它。

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

检查此代码：

＆＃13;

Array(
  ...,
  'author' => 5,
  ...,
)

＆＃13;

Answer 2

DOM还没有加载，你应该把你的脚本放在＆＃34; OnDOMContentLoaded＆＃34;的回调函数中。事件

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

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

当脚本放在head标签内时，为什么HTML5 Canvas不会绘制？

2 个答案: