我有一个包含分层 <canvas> 元素的页面，如答案 here 中所述。画布共同组成了一个动画，因此每个画布都被清除并根据需要重新绘制。
现在我正在尝试使用cross browser shim 合并requestAnimationFrame。但我真的不知道requestAnimationFrame 在幕后做什么。
可以让它在每个循环中更新多个画布吗？每个画布都应该有自己的循环吗？答案取决于浏览器吗？
【问题讨论】：
标签： javascript html canvas
使用这种格式的 js 文件中的画布，以便多个画布的 RequestAnimationFrame 将起作用
(function(){ ... })();
【讨论】：
使用requestAnimationFrame 只是让浏览器控制页面上何时发生重排/重绘。
最好在一个回调中更改所有画布，这样浏览器就可以一次重绘它们。
This explanation of requestAnimationFrame was pretty helpful
【讨论】：
在单个 requestAnimationFrame 中更新所有画布是完全可以的。
如果画布彼此独立并出现在页面的不同部分，那么您可能希望使用单独的requestAnimationFrame 处理程序，将canvas 元素作为第二个参数传递。这样，只有当前可见的画布会得到更新。 （不过，将元素作为第二个参数传递是特定于 WebKit 的。）
requestAnimationFrame 所做的是告诉浏览器您想要更新页面的外观。当页面或元素接下来要重绘时，浏览器会调用回调。当页面/元素可见时就会发生这种情况，而且频率永远不会超过屏幕刷新率。
【讨论】：
如果 shim 不可用，shim 只会退回到计时器。
你应该没事的。在同一个循环中更新所有这些。
requestAnimFrame 没有“绑定”到画布或任何东西，只是您传递给它的函数。因此，您可以将它与三个画布或零个画布一起使用。
【讨论】：