canvas 没有出现在 P5.js 中

Question

所以，我想在我的网站中包含一个绘图页，P5.js 可能是我知道的最简单的方法，因为它类似于 Processing.js，我从可汗学院等等。但出于某种原因，canvas 没有出现，问题是，没有错误消息，而且，它在 P5.js 网站编辑器上工作。
诚然，除了将代码复制粘贴到脚本标记中，我没有尝试过任何其他方法，所以它可能非常明显。这是脚本标签：

    <script src="lib/p5.js">
    function setup() {
  createCanvas(400, 400);
  background(255, 255, 255);
  noStroke();
}

function draw() {
  if(mouseIsPressed){
    fill(mouseY, mouseX, 0);
    ellipse(mouseX, mouseY, 10, 10);
    
    
  }
}
    </script>

(lib文件夹里只有p5.js)

Answer 1

您的库导入和草图 javascript 需要单独的 <script> 标签。 HTML 不支持具有 src 和内联内容的 <script> 标签。

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js">
  </script>
  <script>
    function setup() {
      createCanvas(400, 400);
      background(200);
      noStroke();
    }

    function draw() {
      if (mouseIsPressed) {
        fill(mouseY, mouseX, 0);
        ellipse(mouseX, mouseY, 10, 10);


      }
    }
  </script>
</head>

<body>
  Example:
</body>

canvas 没有出现在 P5.js 中

The canvas isn't showing up in P5.js

javascript

p5.js