RequestAnimationFrame多个画布

Question

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

现在我试图通过使用cross browser shim合并​​。但我真的不知道在幕后做什么​​。

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

Answer 1

更新所有的画布在单个​​是完全没有问题。

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

​​所做的是告诉浏览器您想更新页面的外观。浏览器在页面或元素下次重新绘制时调用回调。当页面/元素可见时，就会发生这种情况，并且永远不会比屏幕刷新率更高。

Answer 2

如果垫片不可用，垫片只能返回到计时器。

你应该没问题。在同一个单一循环中更新它们全部。

requestAnimFrame不是“绑定”到画布或任何东西，只是你传递它的函数。所以你可以使用它与三个画布或零帆布就好。

Answer 3

使用​​只需让浏览器在页面上进行回流/重绘时进行控制。

在一次回调中更改所有画布会更好，因此浏览器可以一次重画它们。

This explanation of requestAnimationFrame was pretty helpful