个人中心
gpt4 book ai didi

javascript - 加载后获取 (p5) Canvas 元素

转载 作者：行者123 更新时间：2023-12-05 06:07:21 25 4
gpt4 key购买 nike

我有两个脚本，其中一个在 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 关键字不允许在窗口加载之前执行脚本，但这实际上不起作用。

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

最佳答案

setup() 函数不会立即运行。它在 p5 自行设置后运行，然后开始调用 setup() 和 draw() 等函数。因此，您尝试在 setup() 函数运行之前访问 Canvas 。

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

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

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

关于javascript - 加载后获取 (p5) Canvas 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65488993/

25 4 0
文章推荐： python - Telepot 错误不断出现
文章推荐： tensorflow - 如何在使用自定义训练循环时使用类权重来计算自定义损失函数(即不使用 .fit )
文章推荐： git - 如何解释 Bitbucket Commit Graph 的可视化？
文章推荐： 使用 SAML 和 azure Active Directory 的 Azure 自定义应用程序 SSO
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com