在进行大量JavaScript处理时，如何强制HTML5画布重新绘制？

Question

这个问题与之前的一个问题有关，但在我开始对代码进行重大更改之前，我想确保我有正确的答案。

我正在开发一个非常计算密集的JavaScript程序，需要不断更新HTML5画布中的图像来绘制动画。现在的代码在紧密循环中绘制所有的动画帧而不将控制返回给浏览器，这意味着最终显示的只是最后一帧。我相信唯一解决这个问题的方法是将动画代码划分为更小的部分，通过超时事件可重入地调用它们。这样做是正确的吗？或者在紧密的JavaScript循环中有没有一种强制画布在某个特定时间点显示其内容的方法？

- templatetypedef

---

"不要将控制权返回给浏览器。" 简单修复，看看会发生什么。 - Dykam

对于 Mozilla，您可以使用 JavaScript 1.7 的 yield 操作符，并在一个带有 setTimeout / setInterval / mozRequestAnimationFrame 帮助下的函数中重复调用 animationGenerator.next()。 - Thai

不要使用setTimeout/setInterval，如果有的话，最好使用requestAnimationFrame。您可以在此处找到此目的的shim，https://gist.github.com/838785。这样做的好处是它将控制权交还给浏览器（如果不可见，则无需刷新等）。 - Juho Vepsäläinen

Answer 1

我相信唯一解决这个问题的方法是将动画代码拆分成较小的部分，通过超时事件可重入调用。这正确吗？

这是正确的。

Javascript是单线程的，因此在执行逻辑时没有其他事情发生的可能。您的唯一选择是通过将逻辑拆分为微型块以在超时上执行来“模拟”线程。

- funkybro

Answer 2

如果可用，您可以使用WebWorkers来完成此操作。只需在WebWorkers中计算需要执行的所有内容，并在完成后发布结果。当您发布消息时，只需刷新图像即可。 计算将在后台完成，页面仅在更新图像时阻塞。

- DoXicK

---

可能会成为问题的是延迟，我不知道传输消息分配了什么优先级。 - Dykam

使用WebWorker与离屏画布结合使用也可能会有所帮助。您可以在Web Worker线程上更新离屏画布，定期回调到主线程，然后调用ctx.drawImage(offScreenCanvas,0,0,height,width)。 - tonethar