RequestAnimationFrame 用于多个画布

Posted 2023-03-05

【中文标题】RequestAnimationFrame 用于多个画布

【英文标题】：RequestAnimationFrame for multiple canvases

【发布时间】：2011-09-08 23:19:25

【问题描述】：

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

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

可以让它在每个循环中更新多个画布吗？每个画布都应该有自己的循环吗？答案取决于浏览器吗？

【参考方案1】：

使用这种格式的 js 文件中的画布，以便多个画布的 RequestAnimationFrame 将起作用

(function() ... )();

【讨论】：

您能否为您的答案添加解释？为什么使用您提供的代码有效？问题是什么？

【参考方案2】：

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

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

This explanation of requestAnimationFrame was pretty helpful

【参考方案3】：

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

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

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

【参考方案4】：

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

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

requestAnimFrame 没有“绑定”到画布或任何东西，只是您传递给它的函数。因此，您可以将它与三个画布或零个画布一起使用。