Question

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

我添加了p5依赖关系，后来又添加了p5.js文件，同时将其链接到HTML中。仍然没有。

如果所有人都在工作，则draw函数将在循环中调用自身并绘制所需的背景和正方形。如果我尝试像通常在JavaScript中那样调用该函数，则会出现以下错误：“未定义背景”，实际上告诉我未实现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 （或任何名称）的方法来调用您想给它）对象，但是可以正常调用本机JS方法。

如何将库（p5.js）添加到Stackblitz IDE？

1 个答案: