HTML5 - 如何繪製完成的畫布/圖像

我正在做一個HTML5和MooTools的小遊戲，並且我在Firefox上遇到了性能問題。我實施了一個計數器來確定我的update方法被調用的頻率，它每秒返回64次。結果似乎慢得多（像30 FPS）。我認爲我的問題實際上是在這篇文章http://blog.sethladd.com/2011/03/measuring-html5-browser-fps-or-youre.html上描述的。我找不到直接解決這個問題的方法，但我認爲我可以優化它的表現。HTML5 - 如何繪製完成的畫布/圖像

我認爲我的邏輯中的一個大問題是我直接在畫布上繪製每個對象。我之前在Java中做過一些遊戲，並且在處理圖像（在內存中繪製）和繪製最終圖像方面有了很大的性能提升。通過這種方式，瀏覽器可以獲得更少的請求，並且可以更快地繪製。

有沒有辦法做到這一點？我在JavaScript中找到了一些用於圖像處理的庫，但我想自己做。

我不能告訴你完整的代碼，因爲該項目是爲了學校，因爲它太大（〜1500行代碼）。

來源

2012-10-25 user1675351

你在說「緩衝輸出」。 – meagar

那麼，要開始，你應該使用'requestAnimationFrame'而不是'setTimeout'。您可以通過不重繪所有內容來進行一些微型優化，只需重新繪製需要更新的內容（有時根據遊戲的性質，這根本不可能）。你也可以通過分層進行一些智能優化（不要畫出那些會被別的東西拉扯的東西）。但是，如果沒有一些實際的代碼，我們無法真正給出可能缺乏的特定優化。 – Shmiddty

http://www.html5rocks.com/en/tutorials/canvas/performance/

也許這會有所幫助。它向您展示瞭如何通過使用屏幕外畫布呈現場景來提高性能。

來源

2012-10-25 21:10:22 lucassp

哇，很好的參考。謝謝！ – Matt

你們都搖滾！非常感謝你，我想這正是我正在尋找的東西！我將在明天/後天嘗試並提供反饋。我希望這有效，這將是太棒了。 = D – user1675351

關於結果的任何消息？這是否改善了很多渲染？ – lucassp

HTML5 - 如何繪製完成的畫布/圖像

回答

相關問題