javascript - 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>

然后我将这个 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.    
});