javascript - 在 JavaScript 中制作并发 Canvas 动画？

Question

我最近在学习JavaScript canvas，我想出了两种制作动画的方法。我在谷歌上搜索了一段时间，但无法确定哪种方式是正确的。

假设我想以 30 fps 的速度渲染不同的对象，在 Canvas 上执行不同的操作。有两种方法可以实现这一目标。

对于这两种方式，都应该有一个主要的 setInterval 函数，以 30fps 的速度绘制所有对象。

1. 每个对象都有一个 nextframe(user_response) 方法，该方法根据用户响应更改该对象的“状态”，并由主 setInterval 调用> 30 次/秒。主要的setInterval需要以某种方式将用户响应传递到每个nextframe(...)，并且它为每个对象调用draw。--这种方法的问题在于，所有对象的所有 nextframe 都会按帧调用，占用系统资源。

2. 对象通过setInterval实现它们自己的动画方法。这些方法根据用户响应进行调用，每秒更改对象“状态”30 次。而主setInterval函数仅以30fps的速度为每个对象调用draw，其行为就像为每个对象的状态“拍照”。对象状态在其他线程中独立更改。因此总会有一个 30fps 的主线程在运行，如果此时有 m 个对象已动画化且 n 个对象未动画化，则有 (m+ 1) 线程总数 -- 问题在于，当许多对象被动画化时，我有许多线程在运行，这也占用系统资源。

那么，哪一种方法更合适呢？或者他们都错了？ :>预先感谢您!

Answer 1

第二个是好的。除非您应该使用 requestNextAnimationFrame 而不是 setInterval。

为了解决资源问题，您可以在draw()方法中添加条件，以避免不必要的重绘。但我认为您需要重新绘制每一帧，因为您必须清除舞台才能绘制移动对象。