我正在使用this tutorial right now,但它工作正常,但是我唯一担心的是它有点慢.我有一个600×600的画布,使用填充工具时,大约需要2秒钟来填充画布.在Microsoft Paint中,即时填充大小的画布,并填充10x大小的画布(6000×6000)在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);
} 

解决方法:

MS Paint是用本机代码(用C或C转换成机器代码)编写的,它比canvas / javascript更快,而且如果正确编写,则渲染效率更高.还请考虑MS Paint可能会使用计算机上硬件的视频渲染功能,我认为大多数浏览器默认情况下都不会使用canvas.

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