我的項目有一個HTML5畫布，在其上重複繪製圖形對象。這些對象變化很快。繪製它們需要時間。我怎樣才能讓它更快？HTML5畫布：更好地重新繪製對象或使用位圖？
對象不是太複雜，但包含諸如弧，漸變，多邊形之類的東西。
對象的外觀取決於大約10個屬性，每個屬性都有大約10個值之一。這意味着只有大約100種不同的外觀才能達到目標。這就是爲什麼我只考慮一次繪製每個外觀然後緩存位圖以供重用的原因。
一切都必須在客戶機上運行（即我不能用現成圖像）
緩存緩存緩存！請查看this article by Simon Sarris和my own findings。基本上你在內存中製作一個畫布，將內容複製到那裏，然後你可以重新使用它們。你會看到巨大的性能提升。
Rotating sprites without caching
Rotating sprites WITH caching（向上走，找到殭屍）
您應該看到在第二個例子一個相當大的改進。
編輯
西蒙在評論中張貼了這個，這應該是很清楚的事情，如果你不能只看演示看到的性能提升。
根據多少對象可以在第二個變化，必然你有多少個對象重繪以及如何 - 在同一秒內，重繪超過緩存可能會相當的選項。
在一般基礎上，我會建議考慮以下決定路徑。
你提到可以有100種不同的方式讓你的一個對象出現。
這可以認爲類似於每個對象的理論上可能的最小99^2狀態轉換。
這些狀態轉換在形狀/大小/顏色上有很大的變化，但它們仍然具有良好的識別性，標記性和可管理性？如果是這樣，緩存所有對象使用的100次不同外觀可能會顯着提高性能。相反，如果 - 例如 - 背景幾乎沒有變化，並且繪製的部分佔據了對象區域的不太重要的部分，那麼您可以認真考慮每次重新繪製它。
事實上，如果您的繪製對象動態變化並且特別是連續變化，預渲染圖像可能無法滿足您的性能需求，因爲預渲染圖像需要在每次狀態轉換時完全繪製，對象可能意味着更少的計算負載。
我試過你的演示和在win7上的Firefox7我真的看不出緩存和非緩存之間的區別。我仍然贊同使用緩存，因爲在繪製「對象」（多邊形/漸變）時，緩存速度要快得多。當緩存由於新瀏覽器的渲染api支持而快速旋轉時，原因可能更多 – Niko
另外，本文對於畫布性能提示非常棒：http://www.html5rocks.com/en/tutorials/canvas/performance/ –
@Niko我需要更新我的演示版，現在它已經非常老了，你看到的主要性能增益是當你在屏幕上添加幾百個。 – Loktar