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

时间:2013-05-24 08:23:22

标签: html5-canvas

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

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

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

1 个答案:

答案 0 :(得分:3)

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

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

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

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

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