html5 canvas 来自外部 js 文件不工作

Question

在外部文件中存储 canvas js 无效。

如果在 canvas 上绘制的 javascript 在 html header 中提供，则 canvas 可以正确绘制矩形。

下面显示的是 html 有效（即 html header 中的 javascript）

<!DOCTYPE html>

<html>
  <head>
    <script type="javascript/text" src="js/nodeServer.js"></script>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "green";
        ctx.fillRect(0, 0, 100, 50);
      };
    </script>
  </head>
  <body>
    <h1>Canvas</h1>
    <canvas
      id="myCanvas"
      width="300"
      height="400"
      style="background-color:#efefef;"
    ></canvas>
  </body>
</html>

然而，当我将js传输到位于js/main.js的外部文件时，矩形没有被绘制出来，但我认为参考是好的。我不知道出了什么问题。

这里是 html，header 中没有 javascript。

<html>
  <head>
    <script type="javascript/text" src="js/nodeServer.js"></script>
  </head>
  <body>
    <h1>Canvas</h1>
    <canvas
      id="myCanvas"
      width="300"
      height="400"
      style="background-color:#efefef;"
    ></canvas>
    <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>

这里是 main.js 文件

window.onload = function() {
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "green";
  ctx.fillRect(0, 0, 50, 50);
};

堆栈上还有其他相关问题，但答案没有解决我的问题。我究竟做错了什么？我确定将我的 js 放在 window.onload 函数中，并且我在 html.

的 body 底部引用了 canvas 脚本

谢谢你帮助我。

...有关可能相关或不相关的更多详细信息，我是运行带有节点的应用程序。在与html文件相同目录的ubuntu终端中，

node js/nodeServer.js

（您必须安装节点才能执行此操作。）

这里是js/nodeServer.js文件的内容

const http = require("http");
const fs = require("fs");

fs.readFile("./index.html", function(err, html) {
  if (err) {
    throw err;
  }
  http
    .createServer(function(request, response) {
      response.writeHeader(200, { "Content-Type": "text/html" });
      response.write(html);
      response.end();
    })
    .listen(4242);
});

像 Chrome 一样在 Web 浏览器中转到 http://localhost:4242。

更新：我注意到当我打开 chrome 开发人员工具并转到 'sources' 选项卡时，js/main.js 文件内容奇怪地显示了我的 html 代码，而不是 js 代码.下面我给出了显示 index.html 文件的源图片，然后是显示 main.js 文件的图片。 html 文件没有 SyntaxError，但 main.js 文件显示 SyntaxError。

但是，我仔细检查以确保 main.js 是我 os 上的 javascript 文件。

> cat js/main.js 

window.onload = function() {
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "green";
  ctx.fillRect(0, 0, 50, 50);
};

Answer 1

我猜因为您使用的是节点服务器，所以您不需要在 html.

中包含行 <script type="javascript/text" src="js/nodeServer.js"></script>

您还需要通过您的 http 服务器提供 .js 文件，您只在代码示例中提供 html。

尝试使用 express https://expressjs.com/ 之类的东西来处理您的应用程序的服务文件。

如果您不需要节点服务器，您可以这样做：https://codesandbox.io/s/sleepy-chaum-5c8dk

html5 canvas 来自外部 js 文件不工作

html5 canvas from external js file not working

html

javascript

external-js

html5-canvas