0

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

我添加了 p5 依赖项，后来又添加了 p5.js 文件，同时在 HTML 中链接它。仍然一无所有。

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

4

1 回答 1

0

由于 p5 依赖项是使用 npm 注入和管理的，因此您需要使用 p5.js实例模式。为了在 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 方法。

于 2019-02-10T17:49:53.577 回答