HTML5 Canvas 在外部 JavaScript 文件中不起作用答案

【问题标题】：HTML5 Canvas not working in external JavaScript fileHTML5 Canvas 在外部 JavaScript 文件中不起作用
【发布时间】：2012-07-06 04:03:54
【问题描述】：

我已经用 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>

并且我将这个功能性.js 文件保存在 JavaScript 目录中，我已经尝试在这个文件中执行其他 JS 函数来检查索引页面并且 JS 已连接并且它们是......答案可能正在盯着我看脸，但由于某种原因我看不到它！

非常感谢任何帮助，谢谢。

编辑：我一直在使用 Firebug，它没有给我任何错误，当我在索引页面上使用代码时，我看到了我想要的形状，当使用外部 JS 文件时，我只看到一个大黑矩形。

【问题讨论】：

标签： javascript html directory

【解决方案1】：

原因是脚本在画布元素渲染之前运行。

要修复它，请将其添加到您的外部文件中。

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

或使用 jquery

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

【讨论】：

谢谢 :) 就是票！它现在似乎正在工作，我已将脚本类型声明放在页面底部。感谢所有帮助过的人！！

【解决方案2】：

在functionality.js 中，尝试将您的代码包装在

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

这样它在页面加载之前不会执行。

【讨论】：

感谢您的评论，我尝试这样做但无济于事:(

【解决方案3】：

如果它在头部，你在画布元素被渲染之前加载它。查看 JavaScript 控制台，您将看到 Null 或未定义错误。

在与内联代码一起使用的相同位置添加脚本标记。 JavaScript 不必存在于头脑中，一些开发人员会建议它应该始终是主体中的最后一件事。

其他解决方案是在文档就绪或窗口加载时运行脚本。

【讨论】：

谢谢你的回复，我想做的是使用外部的JS文件，我之前用过外部文件，没有出现任何问题，真是郁闷。
将外部文件准确地移动到原始代码所在的位置，它将起作用。

【解决方案4】：

不要放在头部，当你把代码放在头部时，它会在页面中还没有canvas元素时运行代码。

【讨论】：

感谢您的评论，代码在 index.html 页面上的标记内并且工作正常，只是当我尝试在头部链接 JS 文件时，它不想工作...
只需将