绘制到隐藏画布时需要requestAnimationFrame吗？

Question

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

据我所知，隐藏的画布绘图应该是高性能的，即使它不是通过requestAnimationFrame触发的。是这样吗？因为我只会使用requestAnimationFrame来显示主屏幕上隐藏画布的blitting。

我正在处理的应用程序并没有很大的动画效果，但是当有些内容发生变化时，它会有很多行。

Answer 1

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

即使如此，根据我的经验，backbuffered canvas与requestAnimationFrame一起使用时，我从未看到有效收益。实际上，requestAnimationFrame可以将浏览器绘制与监视器的刷新率同步，从而实现流畅的动画和更灵敏的页面。如果用户切换到另一个选项卡，动画将停止，这样可以节省移动设备的CPU使用率和电池寿命。

我不建议使用后台缓冲画布，而是建议您直接在requestAnimationFrame回调中的主画布中执行绘图。如果你不断地继续绘制backbuffer画布并将主画布捕获到requestAnimationFrame调用中，你可能会不必要地（或不依赖于你）丢失一些帧，从而浪费CPU使用率和低质量的动画。

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

根本不需要requestAnimationFrame。您始终可以使用setInterval或setTimeout，但使用requestAnimationFrame的优点比他的缺点更大，这使得它更适合动画。