HTML5 Canvas無法在外部JavaScript文件中使用

Question

我已經用JavaScript編寫了這段代碼，當我將它包含在index.html頁面上時，它可以正常工作：

<canvas id="bannerCanvas" width="960" height="200">
    Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

   var canvas = document.getElementById("bannerCanvas");
   var context = canvas.getContext("2d");
     context.beginPath();
     context.moveTo(25,25);
     context.lineTo(355,55);
     context.lineTo(355,125);
     context.lineTo(25,125);
     context.moveTo(465,25);
     context.fill();
};  
</script>

...但是當我將它放在外部JavaScript文件中時，它將無法正常工作！ 在索引頁面的頭部，我已聲明：

 <script type="text/javascript" src="JavaScript/functionality.js">
 </script>

我在JavaScript目錄中保存了這個functional.js文件，我已經嘗試在這個文件中做其他JS函數來檢查索引頁面並且JS已連接並且它們是......答案可能正在盯着我但是由於某種原因，我看不到它！

非常感謝任何幫助，謝謝。

編輯：我一直在使用Firebug並且它沒有給我任何錯誤，當我在索引頁面上使用代碼時，我在使用外部JS文件時看到了我想要的形狀我只看到一個大的黑色矩形。

Answer 1

原因是腳本在canvas元素呈現之前運行。

要修復它，請在外部文件中添加它。

document.addEventListener('DOMContentLoaded',domloaded,false);
function domloaded(){
    // your code here.
}

或者使用jquery

$(function(){
    // your code here.    
});

Answer 2

在functionality.js ，嘗試將代碼包裝在中

window.onload = function() {
// code here
}

這樣在頁面加載之前它才會執行。

Answer 3

如果它在頭部，則在渲染canvas元素之前加載它。 查看JavaScript控制台，您將看到Null或未定義的錯誤。

將腳本標記添加到與內聯代碼一起使用的相同位置。 JavaScript不必生活在頭腦中，一些開發人員會建議它應該始終是身體中的最后一件事。

其他解決方案是在文檔就緒或window onload上運行腳本。

Answer 4

不要放在頭腦中，當你把代碼放在頭部時，它會在頁面中沒有canvas元素時運行代碼。