javascript - 有什么方法可以使这种洪水在 HTML5 Canvas 中更快地填充？

Question

我正在使用 this tutorial right now我让它运行得很好，但我唯一担心的是它有点慢。我有一个 600x600 的 Canvas ，当使用填充工具时，大约需要 2 秒来填充 Canvas 。在 Microsoft Paint 中，填充该尺寸的 Canvas 是即时的，而填充该尺寸的 10 倍 (6000x6000) 的 Canvas 仍然略短，大约需要 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 是用 native 代码编写的(C 或 C++ 转换为机器代码)，与 canvas/javascript 相比，它的渲染速度要快得多，而且如果编写正确的话，渲染效率更高。还要考虑到 MS Paint 可能会使用计算机硬件的视频渲染功能，我认为 canvas 在大多数浏览器中默认情况下不会这样做。

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