Javascript 加载（p5）canvas元素后获取该元素

我有两个脚本，其中一个在p5画布上有一个动画，另一个脚本上我对它做一些操作

脚本A-p5动画：

function setup() {
  let canvas = createCanvas(640, 480);
  canvas.id("vizCanvas");
  // ...

}

function draw() {
 // animation ...
}

const myCanvas = document.getElementById('vizCanvas');
doSomethingWithMyCanvas(myCanvas)

function doSomethingWithMyCanvas(canvas){
    console.log('hello', canvas)
}

脚本B-使用动画执行某些操作：

function setup() {
  let canvas = createCanvas(640, 480);
  canvas.id("vizCanvas");
  // ...

}

function draw() {
 // animation ...
}

const myCanvas = document.getElementById('vizCanvas');
doSomethingWithMyCanvas(myCanvas)

function doSomethingWithMyCanvas(canvas){
    console.log('hello', canvas)
}

view.ejs（~=index.html）：

但当这种情况发生时，p5动画实际上不再工作。事实上，如果我只是将脚本B更改为：

脚本B（第2版）

p5动画将不会播放！也就是说，p5中的

update（）

似乎正在运行，但我什么都没看到

因此，我的问题是：加载p5 canvas元素后如何获取它？

函数不会立即运行。它在p5自我设置后运行，然后开始调用函数，如

setup（）

和

draw（）

。因此，您试图在

setup（）

函数运行之前访问画布

有几种方法可以解决这个问题：

创建画布后，从

setup（）

调用函数。如果需要，可以在其他脚本文件中定义该函数

使用它，您可以更好地控制p5.js的运行时间

---

我个人会选择选项1，但这取决于你的背景和你想做什么。

这是可行的！谢谢你的建议我自己永远也不会发现这个

window.onload = () => {
  console.log("hi")
}