HTML5画布和JavaScript的document.getElementById（）返回null

我尝试使用HTML5画布当我做HTML5画布和JavaScript的document.getElementById（）返回null

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>

我不知道是什么错误

来源

2013-03-15 lilwayne1556

帆布尚未加载，直到你做的第一个电话的时间。尝试调用它在窗口加载或文档准备 – Amitd 2013-03-15 19:17:12

@FelixKling这是一个伟大的职位（很好的工作！），没有意识到这一点，反对以后书签。 – 2013-03-15 19:30:17

你最终做了什么？ – 2013-03-29 22:38:34

机会是你的脚本运行之前，你的DOM准备好了，窗口已经加载，例如：

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

来源

2013-03-15 19:15:46

感谢这工作。 – lilwayne1556 2013-03-15 19:18:31

@ lilwayne1556如果我的答案解决了您的问题，请考虑接受它。 – 2013-03-15 19:21:58

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

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

来源

2013-03-15 19:18:32 XiM

您发布了与我所做的类似的答案，只是〜3分钟后。你认为你的答案对我有什么好处，你选择添加它？ – 2013-03-15 19:20:13

对不起，没有看到你已经发布了正确的答案... – XiM 2013-03-15 19:23:02

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

享用编码..

来源

2013-03-15 19:27:22

尝试在关闭正文标记之前插入脚本。

像：

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

来源

2013-03-15 19:49:55

HTML5画布和JavaScript的document.getElementById（）返回null

回答

相关问题