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元素时运行代码。