强制HTML5画布在重做JavaScript处理时重绘？

此问题与this older one,有关，但我想确保在我开始对代码进行重大更改之前我有正确的答案。强制HTML5画布在重做JavaScript处理时重绘？

我的工作，需要在HTML5画布不断更新的图像绘制的动画非常计算密集的JavaScript程序。正如现在所写，代码以紧密的循环方式绘制动画的所有帧，而不会将控制权返回给浏览器，这意味着最终显示的内容仅仅是最后一帧。我非常肯定，解决这个问题的唯一方法是将动画代码分割成可以通过超时事件重复调用的较小片段。它是否正确？或者是否有办法强制画布在某个点上显示其内容，即使是在严格的JavaScript循环中？

来源

2011-05-16 templatetypedef

”没有将控制权返回给浏览器。“轻松修复，看看会发生什么。 – Dykam 2011-05-16 08:51:21

对于Mozilla，您可以使用[JavaScript 1.7的yield yield operator]（https://developer.mozilla.org/en/JavaScript/Guide/Iterators_and_Generators），并在函数的帮助下反复调用'animationGenerator.next（）' 'setTimeout' /'setInterval' /'mozRequestAnimationFrame'。 – Thai 2011-05-16 09:05:07

而不是setTimeout/setInterval你应该可能使用requestAnimationFrame。你可以在https://gist.github.com/838785找到这个垫片。这很好的一面是，它将控制权交给浏览器（如果不可见，则不需要刷新等）。 – 2011-05-16 13:01:15

我敢肯定，解决这个问题的唯一方法是将动画代码分成可以通过超时事件重复调用的较小片段。它是否正确？

This is correct。

JavaScript是单线程的，所以也没有办法做别的事情，而正在执行你的逻辑发生。你唯一的选择就是通过将你的逻辑分成微块来在超时执行时“模拟”线程。

来源

2011-05-16 07:52:54 funkybro

如果可用，您可以使用webworkers这一点。只需计算您在网络工作者需要做的所有事情，并在完成后将结果发回。当您发回消息时，您可以刷新图像。计算将在后台完成，您的页面只会在更新图像时阻止。 “

来源

2011-05-16 08:35:10 DoXicK

什么可能成为一个问题是延迟，我不知道优先级分配给传输的消息。 – Dykam 2011-05-16 08:52:08

将webworker与offscreen画布结合使用也有帮助。您可以更新Web工作线程的屏幕外画布，定期回调主线程，然后调用'ctx.drawImage（offScreenCanvas，0,0，height，width）' – tonethar 2012-12-06 19:50:50

强制HTML5画布在重做JavaScript处理时重绘？

回答

相关问题