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.    
});