HTML5画布不是在外部JavaScript文件工作(HTML5 Canvas not workin

我曾在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>

我保存这个文件functionality.js在JavaScript目录中，我试图在这个文件做其他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控制台，你会看到一个空或未定义的错误。

添加脚本标记在它的工作原理与内嵌代码的同一个地方。 JavaScript并没有住在头部和一些开发商会建议它应该永远是在身体的最后一件事。

另一个解决办法是运行在文件准备或窗口的onload脚本。

Answer 4:

不要放于头，当你把代码的头部，它运行的代码时，有页面没有canvas元素呢。

文章来源: HTML5 Canvas not working in external JavaScript file