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

HTML5 Canvas not working in external JavaScript file

本文关键字：文件 不起作用 JavaScript 外部 Canvas HTML5      更新时间：2023-09-26

我用JavaScript编写了这段代码，当我把它包含在我的索引.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文件时，我只看到一个大的黑色矩形。

原因是

脚本是在呈现 canvas 元素之前运行的。

要修复它，请在外部文件中添加它。

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

或使用 jquery

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

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

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

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

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

将脚本标记添加到与内联代码相同的位置。JavaScript 不必活在头脑中，一些开发人员会建议它应该永远是身体中的最后一件事。

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

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

相关文章：