有什麼方法可以讓HTML5畫布中的洪水填充更快？

我使用的是this tutorial right now，我的工作很完美，但我唯一擔心的是它有點慢。我有一個600x600的畫布，使用填充工具時，大約需要2秒來填充畫布。在Microsoft Paint中填充大小的畫布是即時的，並且填充大小爲（6000x6000）10x的畫布在大約1秒時仍略短。有什麼方法可以讓HTML5畫布中的洪水填充更快？

這僅僅是javascript和canvas元素的限制，還是可以優化爲接近MS Paint等桌面程序的速度？我用螢火蟲異型它和該功能似乎是主要瓶頸之一，但它確實有運行每次迭代所以..

function matchStartColor(pixelPos, startR, startG, startB) { 
    var r = colorLayerData.data[pixelPos]; 
    var g = colorLayerData.data[pixelPos + 1]; 
    var b = colorLayerData.data[pixelPos + 2]; 

    return (r == startR && g == startG && b == startB); 
}

來源

2012-06-14 Ryan Peschel

您可能想嘗試一種非遞歸填充算法，因爲顯然Chrome具有堆棧限制：http://www.somethinghitme.com/2012/03/07/html5-canvas-flood-fill/。另外，也許http://code.google.com/p/canvas-floodfill/會很有用。 –

@AndrewMorton感謝提到，但我的方法真的很容易受到堆棧限制（somethinghitme.com）。 – Loktar

@Loktar我正在使用你的網站文章指出，可能會有限制，但提到你的網站的榮譽被提及:) –

MS漆是本機代碼編寫（C或C++轉換爲機器代碼），這是更快，如果正確書寫，比canvas/javascript更高效地呈現。還要考慮到MS Paint可能會使用計算機上硬件的視頻渲染功能，我認爲在大多數瀏覽器中，canvas並不是默認設置。

此外，MS Paint的洪水/填充算法可能與您正在使用的算法不同。總有不止一種方法可以實現。你是否嘗試了一種簡單的逐行掃描，隨着時間的推移填充白色像素？您可以嘗試一下，僅用於基準測試目的。

來源

2012-06-14 19:46:18 kevin628

我也跟着這個tutorial.This算法不適用於預定義的圖像。它只適用於你在畫布上繪製的東西。

來源

2012-09-09 21:02:27 Taha

因爲在實際圖像中，你可能會認爲它是相同的顏色，但不是（例如rbg（100,100,100）vs rbg（99,100,99）），當然在照片中會更常見。修改matchColor以返回'（startR + toleranceR> r> startR - toleranceR）&& so on'。希望得到這個幫助。 – simpletron

有什麼方法可以讓HTML5畫布中的洪水填充更快？

回答

相關問題