有没有办法在HTML5画布中更快地填充洪水？

Question

我正在使用this tutorial right now并且我完美地完成了它，但我唯一担心的是它有点慢。我有一个600x600的画布，当使用填充工具时，填充画布大约需要2秒钟。在Microsoft Paint中，填充画布的大小是即时的，并填充画布10倍，大小（6000x6000）仍然略短于1秒。

这只是javascript和canvas元素的限制，还是可以优化接近MS Paint这样的桌面程序的速度？我用Firebug描述它，这个函数似乎是主要的瓶颈之一，但它必须运行每一次迭代所以..

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);
} 

Answer 1

MS Paint是用本机代码（C或C ++转换为机器代码）编写的，速度要快得多，如果写得正确，渲染效率要高于canvas / javascript。还要考虑MS Paint可能会使用计算机上硬件的视频渲染工具，我认为在大多数浏览器中默认情况下都不会使用canvas。

此外，MS Paint的泛滥/填充算法可能与您使用的算法不同。实现目标的方法总是不止一种。您是否尝试过简单的逐行扫描，随时填充白色像素？您可以尝试一下，仅用于基准测试目的。

Answer 2

我也遵循了这个教程。这个算法不适用于预定义的图像。它只适用于你在画布上绘制的东西。