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

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); 
}