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

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

javascript html canvas

Javascript 使用上下文在画布上抛出HTML5元素,javascript,html,canvas,Javascript,Html,Canvas,这是一个代码示例，我想使用上下文绘制一个对象它在Firefox 15上抛出一个错误： TypeError: el is null [Break On This Error] GetElementById已被正确捕获，但它抛出了一个错误。我还检查了头，脚本标签，它是正确的。我还将脚本代码放在head标记中，结果是一样的以下是代码示例： <!doctype html> <html lang="en"> <head> <ti

这是一个代码示例，我想使用上下文绘制一个对象

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


帆布
帆布{
边框：1px纯黑；
}
var el=document.getElementById（“myCanvas”）；//这是空的
var context=el.getContext（“2d”）；
context.fillStyle='#00f'；
context.strokeStyle='#f00'；
context.lineWidth=4；
context.beginPath（）；
上下文。移动到（10,10）；
lineTo（100,10）；
lineTo（10100）；
上下文。lineTo（10,10）；
context.fill（）；
stroke（）；
closePath（）；

画布元素出现在

块之后。当脚本代码运行时，它（代码）还不在DOM中，因此

getElementById（）

将找不到它

将

放在脚本之前，然后重试

DOM在解析页面时以增量方式构建。但是，一旦找到

结束标记，脚本块就会被评估。因此，在执行脚本时，浏览器根本没有解释

。

是。画布应该在脚本标记之前。非常感谢。DOM正在查找画布，但脚本大量出现。就是这样。解决了的。