強制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處理時重繪？

回答

相關問題