Question

代码示例，我想使用上下文绘制对象。

它在Firefox 15上抛出错误：

TypeError: el is null
[Break On This Error]

GetElementById已被正确抓取，但它抛出了一个错误。我也在检查头部，脚本标签，这是正确的。我也把脚本代码放在head标签中，结果是一样的。

这是代码示例：

<!doctype html>
<html lang="en">
    <head>
        <title>Canvas</title>
        <meta charset="utf-8">  
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
    </head>
    <body>
        <script>
            var el = document.getElementById("myCanvas"); // this thrown empty

            var context = el.getContext("2d");

            context.fillStyle = '#00f';
            context.strokeStyle = '#f00';
            context.lineWidth = 4;

            context.beginPath();
            context.moveTo(10, 10);
            context.lineTo(100, 10);
            context.lineTo(10, 100);
            context.lineTo(10, 10);
            context.fill();
            context.stroke();
            context.closePath(); 
        </script>
        <canvas id="myCanvas" width="600" height="200"></canvas>
    </body>
</html>

Answer 1

您的canvas元素在 <script>块之后显示。当脚本代码运行时，它（<canvas>）尚未在DOM中，因此getElementById()将无法找到它。

在脚本之前放置<canvas> 并再次尝试。

在解析页面时，DOM会逐步构建。但是，只要找到</script>结束标记，就会对脚本块进行评估。因此，当您的脚本被执行时，浏览器尚未解释<canvas>。

使用上下文在画布上抛出HTML5元素

1 个答案: