RequestAnimationFrame 用于多个画布

Question

我有一个带有分层<canvas>元素的页面，如此处答案中所述。 画布一起构成了 animation，因此每个画布都在必要时被清除和重绘。

现在我正在尝试通过使用跨浏览器 shim来合并requestAnimationFrame 。 但我真的不知道requestAnimationFrame在幕后做了什么。

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

Answer 1

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

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

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

Answer 2

使用requestAnimationFrame只是让浏览器控制页面上何时发生重排/重绘。

最好在一个回调中更改所有画布，以便浏览器可以在一个 go 中重新绘制它们。

requestAnimationFrame 的这个解释很有帮助

Answer 3

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

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

requestAnimFrame没有“绑定”到 canvas 或任何东西，只是 function 你通过它。 因此，您可以将它与三个画布或零个画布一起使用就可以了。

Answer 4

在这种格式的 js 文件中使用 canvas 以便多个 canvas 的 RequestAnimationFrame 将起作用

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