我有很多 Canvas (大约 200 张)需要预渲染。当浏览器呈现它们时，页面的其他部分不会在更改期间重新绘制(例如进度条)，因此页面有很多不稳定的更新/动画。我尝试通过 window.requestAnimationFrame 调用 Canvas 绘图但这并没有改善它。
我如何强制它更频繁地重绘？
动画帧使用示例
//This is done 200 times (once for each canvas)
function draw()
{
//Draw the image to canvas
context.drawImage( ... );
}
requestAnimationFrame( draw );
最佳答案
rAF 只能请求一个新帧(与监视器同步)——不能保证一定能得到。
如果您的代码使用的时间超过可用时间预算(对于 60 Hz 系统大约需要 16.7 毫秒)，如果您更新 200 个 Canvas ，则很可能会出现这种情况，您将无法获得下一帧，直到下一帧可用。
如果您的代码使用了很多时间，这在未来可能会有很多帧，并且动画会出现“不稳定”。
在这些情况下，使用 setInterval 和 f.ex 降低帧率可能更好。 1000/15 的延迟，只是忍受它不会不时更新监视器同步。
更新200张 Canvas ，也就是说更新的区域也是正常 Canvas 大小的200倍。此外，浏览器必须维护 200 个元素的重绘，而不仅仅是一个。在 JavaScript 中你只能做这么多..
关于javascript - requestAnimationFrame 的目的是什么？重绘时间没有任何区别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19434638/