javascript - Html5 画布和 javascript document.getElementById() 返回 null

Question

我正在尝试使用 html5 画布，当我这样做时

    var c=document.getElementById('myCanvas');
    var ctx=c.getContext('2d');
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);

这是html

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="game.js"></script>
    </head>
    <body>
    <canvas id="myCanvas" width="512" height="480" style="border:1px solid #000000;">
    </canvas>
    </body>
    </html>

我不知道出了什么问题

score 6 · Accepted Answer

您的脚本可能在您的 DOM 准备好并且窗口已加载之前运行，例如：

window.onLoad=function(){
    var c=document.getElementById('myCanvas');
    var ctx=c.getContext('2d');
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
};

score 1 · Accepted Answer

尝试在结束正文标记之前插入脚本。

像：

...
    <script src="game.js"></script>
</body>
...

score 0 · Accepted Answer

您可以在加载 DOM 之前尝试获取它吗？尝试在此块内调用您的代码：

window.onload = function() {
    var c=document.getElementById('myCanvas');
    var ctx=c.getContext('2d');
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
};

score 0 · Accepted Answer

如果您想通过访问DOM Element，javascript请确保您的 java 脚本代码应该在 DOM 加载后触发，使用document.onload或window.onload回调来触发您的 javascript 代码。

享受编码..

javascript - Html5 画布和 javascript document.getElementById() 返回 null

4 回答 4

Related

Reference