1

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

它在 Firefox 15 上引发错误：

TypeError: el is null
[Break On This Error]

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

这是代码示例：

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

1 回答 1

2

您的画布元素出现在<script>块之后。当脚本代码运行时，它（<canvas>）还没有在 DOM 中，所以getElementById()不会找到它。

把脚本放在<canvas> 前面，然后再试一次。

DOM 是随着页面的解析而逐步构建的。但是，一旦</script>找到结束标记，就会评估脚本块。因此，当您的脚本被执行时<canvas>，浏览器根本还没有解释。

于 2012-10-21T13:13:29.190 回答