在多个画布的 p5js 实例模式下，未定义 p5 对象答案

【问题标题】：In p5js instance mode for several canvases p5 object is not defined在多个画布的 p5js 实例模式下，未定义 p5 对象
【发布时间】：2021-08-29 18:35:16
【问题描述】：

我正在烧瓶服务器上运行 p5.js 草图。我想画几个画布，所以我像 Daniel Schiffman 在他的"9.11: Instance Mode (aka "namespacing") - p5.js Tutorial"-Video 中展示的那样实例化了我的代码，但是当我运行代码时，它给了我 "Uncaught ReferenceError: p5 is not defined" 就行了我实例化我的画布

var drawCanvas = new p5(firstcanvas);

当我在 p5 网络编辑器中运行代码时，它可以工作。

我的html中的脚本标签是这样的

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"
       integrity="sha512-a5hlZKgpC1LVAuKgVeXdP0D9Yfacj0hLtNdzx9zFMkIWRrQyO37KtIPiqArGmVuaBYu3ON6Vt0N3+G/JaLXQYQ=="
       crossorigin="anonymous" referrerpolicy="no-referrer"></script>

所以这是最新版本。任何想法？谢谢

最小重复示例：

var firstCanvas = function(a) {
  let abc;
  a.setup = function() {
    abc = 100;
    a.createCanvas(800, 600);
    a.background(260);
    n = a.createButton("NEW");
    n.position(20, a.height + 225);
    n.mousePressed(clearCanvas);
  }
  a.draw = function() {
    a.fill(10);
    a.rect(a.mouseX, a.mouseY, abc, 50);
  }

  function clearCanvas() {
    a.background(260);
  }
}
var drawCanvas = new p5(firstCanvas);

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"
       integrity="sha512-a5hlZKgpC1LVAuKgVeXdP0D9Yfacj0hLtNdzx9zFMkIWRrQyO37KtIPiqArGmVuaBYu3ON6Vt0N3+G/JaLXQYQ=="
       crossorigin="anonymous" referrerpolicy="no-referrer"></script>

【问题讨论】：

如果您包含问题的最小可重复示例stackoverflow.com/help/minimal-reproducible-example，将会很有帮助

标签： javascript html instance p5.js mode

【解决方案1】：

当我复制该脚本标记并定义一个简单的firstcanvas 函数时，它似乎工作正常。

function firstcanvas(p5) {
  var x;

  p5.setup = function() {
    p5.createCanvas(400, 400);
    p5.background(51);
    x = p5.width/2;
  }
  
  p5.draw = function() {
    p5.background(51);
    p5.circle(x, p5.height/2, 100);
    x++;
    if (x - 50 >= p5.width) x = -50;
  }
}

var drawCanvas = new p5(firstcanvas);

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"
       integrity="sha512-a5hlZKgpC1LVAuKgVeXdP0D9Yfacj0hLtNdzx9zFMkIWRrQyO37KtIPiqArGmVuaBYu3ON6Vt0N3+G/JaLXQYQ=="
       crossorigin="anonymous" referrerpolicy="no-referrer"></script>

【讨论】：

【解决方案2】：

我明白了。我确实直接运行了 html 文件而没有在 PyCharm 中进行调试并得到了这个错误。当我给它一个路线并在 run.py 上启动它时，它（几乎）正常工作。

【讨论】：