java - 如何加快此JavaScript绘画应用程序的速度？

Closed. This question needs to be more focused。它当前不接受答案。












想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。

6年前关闭。



Improve this question





好的，我已经构建了一个绘画应用程序，其中包括使用HTML画布的绘画桶工具。油漆桶的问题在于，即使我使它尽可能地高效，它也需要花费很长时间做出响应。这是浏览器没有足够的处理能力的问题吗？ JavaScript只是慢吗？画布慢吗？

对于这样的处理器密集型功能，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);
    });
});

最佳答案

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

HTML5 Canvas通过getImageData函数提供对画布像素的访问。此函数返回带画布区域像素数据（每个像素4个字节，以rgba格式）的byte []缓冲区。

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

建立图片后，您可以使用putImageData将数据重新绘制到画布中。

本教程看起来非常不错：http://creativejs.com/2011/12/day-3-play-with-your-pixels/

关于java - 如何加快此JavaScript绘画应用程序的速度？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20008876/