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

回答

相關問題