Html5 canvas和javascript document.getElementById()返回null

时间:2013-03-15 19:14:17

标签: javascript html5 canvas

我正在尝试使用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>

我不知道什么是错的

4 个答案:

答案 0 :(得分:6)

在你的DOM准备好并且窗口已加载之前,你的脚本可能会运行,例如尝试:

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

答案 1 :(得分:1)

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

像:

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

答案 2 :(得分:0)

你可以尝试在加载DOM之前获取它吗?尝试在此块中调用您的代码:

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

答案 3 :(得分:0)

如果您想通过DOM Element访问javascript,请确保在加载DOM后触发您的java脚本代码,使用document.onloadwindow.onload回调来触发您的JavaScript代码..

享受编码..