HTML5 Canvas 在外部 JavaScript 文件中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11349613/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Canvas not working in external JavaScript file
提问by Tim Johnstone
I have written this code in JavaScript and works perfectly fine when I include it on my index.html page:
我已经用 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>
...however when I place it in an external JavaScript file, it won't work! In the head of the index page, I have declared this:
...但是当我把它放在一个外部 JavaScript 文件中时，它就不起作用了！在索引页的头部，我声明了这一点：
<script type="text/javascript" src="JavaScript/functionality.js">
</script>
And I save this functionality.js file in the JavaScript directory, I've tried doing other JS functions in this file to check the index page and the JS are connected and they are...The answer is probably staring me in the face but for some reason I cannot see it!
我把这个function.js文件保存在JavaScript目录中，我试过在这个文件中做其他JS函数来检查索引页和JS是否连接，它们是......答案可能正盯着我看，但是由于某种原因，我看不到它！
Any help is much appreciated, thank you.
非常感谢任何帮助，谢谢。
EDIT: I've been using Firebug and it is giving me no errors, when I use the code on the index page, I am seeing the shape I want yet when using the external JS file I am just seeing a big black rectangle.
编辑：我一直在使用 Firebug，它没有给我任何错误，当我在索引页上使用代码时，我看到了我想要的形状，而在使用外部 JS 文件时，我只看到一个大的黑色矩形。
回答by
the reason for this is that the script is being run before the canvas element is rendered.
原因是脚本在渲染画布元素之前运行。
To fix it, add this in your external file.
要修复它，请将其添加到您的外部文件中。
document.addEventListener('DOMContentLoaded',domloaded,false);
function domloaded(){
// your code here.
}
or with jquery
或使用 jquery
$(function(){
// your code here.
});
回答by S M
Within functionality.js, try wrapping your code in
在 中functionality.js，尝试将您的代码包装在
window.onload = function() {
// code here
}
so that it won't execute until after the page has loaded.
以便它在页面加载后才会执行。
回答by epascarello
If it is in the head, you are loading it before the canvas element is rendered. Look at the JavaScript console and you will see a Null or undefined error.
如果它在头部，则在渲染画布元素之前加载它。查看 JavaScript 控制台，您将看到 Null 或未定义错误。
Add the script tag in the same place it works with the inline code. JavaScript does not have to live in the head and some developers will recommend it should always be the last thing in the body.
在与内联代码一起使用的同一位置添加脚本标记。JavaScript 不必活在头脑中，一些开发人员会建议它应该始终是身体中的最后一件事。
Other solution is to run the script on document ready or window onload.
其他解决方案是在文档就绪或窗口加载时运行脚本。
回答by Trinh Hoang Nhu
Dont put in the head, When you put the code in the head, it run the code when there is no canvas element in page yet.
不要放在head里，当你把代码放在head里时，它会在页面中还没有canvas元素时运行代码。
