为什么 p5.min.js 代码在 HTML 中内联时不起作用

问题描述 投票：0回答：1

我正在使用 p5.min.js 制作一个可播放的广告（需要一个小于 5 MB 的 HTML 文件）（我已经将脚本存储在本地并正在修改它）。我已将我的代码添加到 p5.min.js 文件中。当我使用 

<script src="p5.min.js"></script>
将此脚本链接到 HTML 文件时，它可以完美运行，没有任何问题。但是，我需要生成包含所有内容的单个 HTML 文件，因此需要将所有外部资源（如 javascript 代码）添加到单个 HTML 文件中。您可以查看 p5.min.js library（缩小版）、p5.js（未压缩版）和我的 HTML 代码如下。

HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }
      canvas {
        display: block;
      }
    </style>

  </head>
  <body>
    <main>
    </main>
    <script src="../src/p5.min.js"></script>
  </body>
</html>

以上是我用src附加脚本的时候。另一种不起作用的情况是当我替换 src 并将完整的 p5.min.js 代码内联（在脚本标签之间） 我目前只是通过将以下内容附加到 p5.min.js 的末尾来在我的代码中创建一个灰色画布

function draw() {
    createCanvas(500, 500);
    background(120);
}

我尝试直接在脚本标签内添加 javascript 代码，但这不起作用，它会在浏览器屏幕上打印代码。 这里是显示的消息。

这看起来像是在这里打印了一些代码。我不确定为什么会发生这种情况，因为相同的代码在脚本标记中作为 src 附加时会按预期运行。这里有什么问题？

我也在尝试使用

InlineChunkHtmlPlugin
但在这种情况下我不确定
entry
，
output
中的值是什么。对此的任何帮助也将非常有用。

javascript html p5.js
1个回答
0
投票

我发现了你的问题。要从外部源调用 p5.js 文件，您首先需要下载该文件或使用 CDN（内容分发网络）链接。 我想告诉你。

function draw() {
    createCanvas(500, 500);
    background(120);
} 
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }
      canvas {
        display: block;
      }
    </style>

  </head>
  <body>
    <main>
    </main>
    <script src="p5.js"></script>
  </body>
</html>

你必须添加

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
这个代码。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.