10

我已经用 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 文件时，我只看到了一个黑色的大矩形。

4

4 回答 4

18

这样做的原因是在呈现画布元素之前正在运行脚本。

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

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

或使用 jquery

$(function(){
    // your code here.    
});
于 2012-07-05T17:47:30.950 回答
4

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

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

这样它直到页面加载后才会执行。

于 2012-07-05T17:43:08.007 回答
2

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

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

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

于 2012-07-05T17:41:26.253 回答
2

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

于 2012-07-05T17:42:11.230 回答