如何将库 (p5.js) 添加到 Stackblitz IDE？

Question

我一直在使用 Stackblitz 作为我的 IDE 让我能够在我的 Chromebook 上更好地编码，它运行良好但我一直在努力实现 p5 库。我应该提一下，我最近才开始学习编程，所以我只会理解绝对基础知识。

我添加了 p5 依赖项，后来添加了 p5.js 文件，同时在 HTML 中链接它。还是什么都没有。

如果一切正常，绘制函数将循环调用自身并绘制请求的背景和正方形。如果我尝试像通常在 JavaScript 中那样调用该函数，它将给我错误："background is not defined" 本质上告诉我 p5 未实现。

Answer 1

由于 p5 依赖项是通过 npm 注入和管理的，因此您需要使用 p5.js instance mode。为了在 StackBlitz 中运行，注入 p5 依赖项后，您的代码应类似于：

import p5 from 'p5';

let sketch = (p) => {

  p.setup = () => {
    p.createCanvas(500, 500);
  };

  p.draw = () => {
    p.background(220);
    p.fill(120);
    p.rect(50, 50, 100, 100);
    console.log("Hello? 1")
  };

  console.log("Hello? 2")
};

let myp5 = new p5(sketch);

请记住，当您想使用 p5 函数时，在实例模式下，您需要将其作为 p[ 的方法调用=19=]（或者你想给它起的任何名字）对象，但可以正常调用原生 JS 方法。

如何将库 (p5.js) 添加到 Stackblitz IDE？

How to add a library (p5.js) to the Stackblitz IDE?

javascript

ide

dependency-injection

p5.js

stackblitz