java - 我怎样才能加快这个 JavaScript 绘画应用程序的速度？

Question

好吧，我已经构建了一个绘画应用程序，其中包括使用 HTML Canvas 的油漆桶工具。油漆桶的问题在于，即使我尽可能地提高它的效率，它也需要很长时间才能响应。这是浏览器处理能力不足的问题吗？ Javascript 只是慢吗？ Canvas 只是慢吗？

Java 会是此类处理器密集型功能的最佳替代方案吗？或者也许是闪光？

好的，这是一些代码。顶部部分(换行符之前)运行，然后换行符下方的部分运行四次，从光标开始每个方向运行一次。 (左、上、右、下)明显显示的是向左一像素。

if (typeof paintPos[x] === 'undefined') {
    paintPos[x] = {};
}
paintPos[x][y] = x+'|'+y;

var runRecurse = 0;
if (typeof paintPos[x-1] === 'undefined') {
    runRecurse = 1;
} else if (typeof paintPos[x-1][y] === 'undefined') {
    runRecurse = 1;
}
if (runRecurse === 1) {
    if (x-1 >= 0) {
        var colData = ctx.getImageData(x-1, y, 1, 1).data;
        var colHexNew = "#" + ("000000" + 
            rgbToHex(colData[0],colData[1],colData[2])).slice(-6);
        if (colHex === colHexNew) {
            setPaintPos(x-1,y,colHex);
        }
    }
}

然后，要实际绘画，我只需这样做:

$.each(paintPos,function(key,value) {
    $.each(paintPos[key],function(key2,value2) {
        var paintCol = value2.split('|');
        var paintX = paintCol[0];
        var paintY = paintCol[1];
        ctx.fillRect(paintX,paintY,1,1);
    });
});

Answer 1

您正在执行像素级操作。绘制微小的 1 像素矩形可能不是最有效的方法。

HTML5 Canvas 通过 getImageData 提供对 Canvas 像素的访问功能。此函数返回包含 Canvas 区域的像素数据(每像素 4 个字节，rgba 格式)的 byte[] 缓冲区。

然后您可以廉价地操作该 byte[] 中的像素。

构建图片后，您可以使用 putImageData 将数据绘制回 Canvas 中.

这个教程看起来不错:http://creativejs.com/2011/12/day-3-play-with-your-pixels/