我有两个脚本，在其中一个脚本中，我在p5画布上有一个动画，在另一个脚本上，我对它进行了一些操作。
脚本A-p5动画：
function setup() {
let canvas = createCanvas(640, 480);
canvas.id("vizCanvas");
// ...
}
function draw() {
// animation ...
}
脚本B-用动画做一些事情：
const myCanvas = document.getElementById('vizCanvas');
doSomethingWithMyCanvas(myCanvas)
function doSomethingWithMyCanvas(canvas){
console.log('hello', canvas)
}
view.ejs(~=index.html(：
<head>
<script src="src/scriptA.js" defer></script>
<script src="src/scriptB.js" defer></script>
</head>
<body>
...
</body>
问题是myCanvas为空。当我使用开发控制台并键入test = document.getElementById('vizCanvas')时，它成功地引用了它。我想这意味着脚本B试图在创建vizCanvas之前获取它。我认为标记中的defer关键字不允许在加载窗口之前执行脚本，但这并不能真正起作用。
我试图将脚本B包装在window.onload事件中，如下所示：
脚本B(修订版1(
window.onload = ()=>{
const myCanvas = document.getElementById('vizCanvas');
doSomethingWithMyCanvas(myCanvas)
function doSomethingWithMyCanvas(canvas){
console.log('hello', canvas)
}
}
但当这种情况发生时，p5动画实际上就不再工作了。事实上，如果我只是将脚本B更改为：
脚本B(修订版2(
window.onload = () => {
console.log("hi")
}
p5动画将不会播放！也就是说，p5中的update()似乎正在运行，我只是什么都没看到。
所以我的问题是：一旦p5画布元素加载，我该如何获取它？
setup()函数不会立即运行。它在p5设置好自己之后运行，然后开始调用setup()和draw()等函数。因此，您试图在setup()函数运行之前访问画布。
有几种方法可以解决这个问题：
- 创建画布后，从
setup()调用一个函数。如果需要，可以在其他脚本文件中定义该函数 - 使用实例模式，这样可以更好地控制p5.js的运行时间
我个人会选择选项1，但这取决于你的背景和你想做什么。