绘制多个矩形时的画布效率

Question

我有一个从图像中的每个像素坐标派生的二维颜色数组。滑块确定像素化矩形的大小，图像以像素化形式重绘。在嵌套循环中，jCanvas 用于将每个“像素”绘制为一个矩形。在调整滑块和新的画布绘制之间有明显的减慢。可以做些什么来提高绘制许多画布矩形的效率？我希望在大于当前 250x250 的图像上使用这个概念，但前提是重绘效率更高。

当滑块值发生变化时，调用该函数：

$("canvas").clearCanvas();

for(var x = 0; x < colorMatrix.length; x += size) {
    for(var y = 0; y < colorMatrix[0].length; y += size) {
        $("canvas").drawRect({
            fillStyle: '#' + colorMatrix[x][y],
            x: (x), y: (y),
            width: size,
            height: size,
            fromCenter: false
        });
    }
} 

干杯， tL

Answer 1

仅通过缓存 $("canvas") 值，您将获得巨大的加速：

var canvas = $("canvas");
canvas.clearCanvas();

for(var x = 0; x < colorMatrix.length; x += size) {
    for(var y = 0; y < colorMatrix[0].length; y += size) {
        canvas.drawRect({
            fillStyle: '#' + colorMatrix[x][y],
            x: (x), y: (y),
            width: size,
            height: size,
            fromCenter: false
        });
    }
}

但如果你真的想提高性能，你应该使用draw method 并将你的整个循环放在那个函数中，这样你就可以使用原始的canvas 绘图API，它可以让你更快地绘制东西。

Answer 2

你也可以从 DOM 中分离元素，应该优化性能：

http://jsfiddle.net/uXBN5/1/

function updatePixelatedImage(size) {
    var $tmp = $('<div/>').insertBefore('canvas'),
        $canvas = $('canvas').detach();
    $canvas.clearCanvas();

    for(var x = 0; x < colorMatrix.length; x += size) {
        for(var y = 0; y < colorMatrix[0].length; y += size) {
            $canvas.drawRect({
                fillStyle: '#' + colorMatrix[x][y],
                x: (x), y: (y),
                width: size,
                height: size,
                fromCenter: false
            });
        }
    } 

    $tmp.replaceWith($canvas);
}