时间戳

首页 > 解决方案 > 脚本正确但不在浏览器中运行

javascript - 脚本正确但不在浏览器中运行

问题描述

所以我在 HTML 中链接了这个非常基本的 js 脚本，当我尝试运行它时它没有给出任何错误，但它只是没有做它应该做的事情。这是代码：

var canvas = document.getElementById("canvas"),
  c = canvas.getContext("2d"),
  width = canvas.width = window.innerWidth,
  height = canvas.height = window.innerHeight;
c.fillRect(0, 0, 50, 50);
<!DOCTYPE html>
<html>

<head>
  <script type='text/javascript' src='main.js'></script>
</head>

<body>
  <canvas id='canvas'></canvas>
</body>

</html>

这应该只是在左上角绘制一个正方形，但它什么也不做。它最初是一个相当大的文件，但我将其缩减为这个只是作为概念证明。如您所见，该代码段有效，但 chrome 无效。

标签： javascripthtmlgoogle-chrome

解决方案

您的脚本在画布声明之前启动。在脚本启动时，您的画布 dom 对象未定义。此外，将类型更改为 text/javascript。更改为：

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <canvas id='canvas'></canvas>
  <script type='text/javascript' src='main.js'></script>
</body>

</html>

推荐阅读