合併像素以最大限度地減少Html canvas上的繪製操作

嗨我正在將畫布繪製到畫布上（html5），我想減少fillRect調用的次數，以期使該過程更高效。合併像素以最大限度地減少Html canvas上的繪製操作

注意：我打電話給canvas.fillRect繪製單個像素，像素可以是1x1或其他大小的矩形，具體取決於我繪製的分辨率（所以我知道它們不叫像素，但我的圖像詞彙有限）。

我想要做的是找到併合並單個像素，如果他們是相同的顏色。這將減少fillRect的調用次數，並希望比我目前的速度更快。

所以可以說我有一個位圖是這樣的：而不是讓9調用fillRect的

[fff, fff, fff] 
[f00, f00, f00] 
[00f, 00f, 00f]

我想提出3

所以我的問題是：

1 ）這個過程叫做什麼（所以我可以做一些更智能的研究，因爲谷歌搜索'合併像素'，'合併矩形'等，沒有產生有用的結果）。

2）任何人都知道，實現這個任何開源庫（不必是JavaScript的）

3）有沒有人覺得增加這個預處理步驟實際上使代碼較慢JS？

感謝所有

圭多·塔皮亞

來源

2010-10-08 gatapia

Re 3）：是的，我不確定您嘗試實施的優化是否確實會有所幫助。一些塗料引擎甚至可能已經在引擎蓋下使用這種技術。如果繪畫程序在嘗試加速之前遇到一些實際的性能問題，我建議您自己去看看。這就是說，我還沒有看到任何人在HTML5中使用canvas都不得不採用這種方法，即使是複雜的渲染。 – 2010-10-10 18:10:36

謝謝Jakub，我做了更多的基準測試，看來我的性能問題中大約有70％不是實際的畫布/渲染問題。所以我認爲我現在最好不要這樣做，而是專注於預處理步驟。謝謝 – gatapia 2010-10-11 03:36:22

我會@Jakub同意，在Javascript中做這種分析很可能需要更長的時間比你的時間通過填充較少的矩形保存（通常是一個非常快速操作圖形卡）。這是除非你必須畫幾千次相同的矩形。

至於它叫什麼，我可以想出最接近的是run-length encoding，這確實是一維而不是兩個。

來源

2010-10-12 19:41:35 LarsH

謝謝LarsH，我也得出了同樣的結論:)爲過早的問題道歉 – gatapia 2010-10-14 21:09:15

合併像素以最大限度地減少Html canvas上的繪製操作

回答

相關問題