html5-canvas - 绘制到隐藏画布时是否需要 requestAnimationFrame？

Question

我有代码可以绘制到隐藏的画布style="visibility: hidden"上，然后将这个隐藏的画布绘制到屏幕上可见的画布上。

现在据我了解，隐藏的画布绘图应该是高性能的，即使它不是通过requestAnimationFrame. 是这样吗？因为我只会requestAnimationFrame用于主屏幕上隐藏画布的 blitting。

我正在开发的应用程序没有大量动画，但是当某些事情发生变化时，有很多线条要绘制。

Answer 1

您应该使用创建的画布创建画布，document.createElement("canvas")并且不要将创建的画布附加到任何 DOM 容器中，而不是使用隐藏样式。（需要测试来证明，但至少是另一种创建 的方法back buffer canvas）。

即便如此，根据我的经验，我从来没有看到使用backbuffered canvaswith的有效收益requestAnimationFrame。事实上，requestAnimationFrame 完成了将浏览器绘制与监视器的刷新率同步的工作，这可以实现流畅的动画和更具响应性的页面。如果用户切换到另一个可以节省 CPU 使用率和移动设备电池寿命的选项卡，动画也会停止。

我不建议使用后台缓冲区画布，而是建议您直接在 requestAnimationFrame 回调内的主画布中执行绘图内容。如果您不断地在后台缓冲区画布中绘制并将主画布困在 requestAnimationFrame 调用中，您可能会不必要地（或不会，这取决于您）丢失一些帧，从而浪费 CPU 使用率和低质量的动画。

为了帮助选择更好的方法，请始终针对您的特定用例进行自己的性能测试。

并且 requestAnimationFrame 根本不需要。你总是可以使用setInterval，或者setTimeout但是使用 requestAnimationFrame 的优点比他的缺点要大得多，这使它成为更好的动画方法。