加载后获取 (p5) canvas 元素

Question

我有两个脚本，其中一个在 p5 上有一个动画 canvas，在另一个脚本上我对其进行了一些操作。

脚本 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 关键字不允许在 window 加载之前执行脚本，但这实际上不起作用。

我尝试将脚本 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 canvas 元素后获取它？

Answer 1

setup() 函数不会立即运行。在 p5 自我设置后运行秒，然后开始调用 setup() 和 draw() 等函数。因此，您试图在 setup() 函数具有运行.

之前访问 canvas

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

创建 canvas 后从 setup() 调用函数。如果需要，可以在您的其他脚本文件中定义该函数。
使用 instance mode 可以更好地控制何时 p5.js 运行s.

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

加载后获取 (p5) canvas 元素

Get (p5) canvas element when it has loaded

javascript

p5.js