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

问题描述

我正在 Flask 服务器上运行 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 标签是这样的

<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>

解决方法

当我复制该脚本标记并定义一个简单的 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>

,

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