RequestAnimationFrame用于多个画布

Question

我有一个分层<canvas>元素的页面，如答案here中所述。画布一起组成一个动画，因此每个都被清除并根据需要重新绘制。

现在我正在尝试使用cross browser shim合并requestAnimationFrame。但我真的不知道requestAnimationFrame在幕后做了什么。

是否可以在每个循环中更新多个画布？每个画布应该有自己的循环吗？答案浏览器是否依赖？

Answer 1

更新单个requestAnimationFrame中的所有画布是完全可以的。

如果画布彼此独立并出现在页面的不同部分，那么您可能希望使用单独的requestAnimationFrame处理程序，并将canvas元素作为第二个参数传递。这样，只有当前可见的画布才会更新。 （但是传递一个元素作为第二个参数是特定于WebKit的。）

requestAnimationFrame的作用是告诉浏览器您要更新页面的外观。当页面或元素接下来进行重绘时，浏览器会调用回调。当页面/元素可见时，这种情况就会发生，并且永远不会超过屏幕刷新率。

Answer 2

使用requestAnimationFrame只需让浏览器控制页面上的重排/重绘时间。

最好在一个回调中更改所有画布，这样浏览器就可以一次性重绘它们。

This explanation of requestAnimationFrame was pretty helpful

Answer 3

如果垫片不可用，垫片只会回落到计时器上。

你应该没事。在同一个循环中更新所有这些。

requestAnimFrame不与画布或任何东西“绑定”，只是你传递它的功能。因此，您可以将它与三幅画布或零画布一起使用。

Answer 4

以这种格式的js文件使用画布，以便多个画布的RequestAnimationFrame可以工作

(function(){ ... })();