Question

将canvas js存储在外部文件中不起作用。

如果html标头中提供了在画布上绘制的javascript，则画布可以正确绘制矩形。

下面显示的是适用的html（即html标头中的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的外部文件时，不会绘制矩形，但是我认为引用是好的。我不知道怎么了

这是标头中没有javascript的html。

<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主体的底部引用了canvas脚本。

感谢您的帮助。

...有关可能相关或不相关的更多详细信息，我正在使用node运行该应用程序。在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之类的网络浏览器中转到http://localhost:4242。

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

但是，我仔细检查以确保main.js是操作系统上的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

来自外部js文件的html5 canvas无法正常工作

1 个答案: