我有一个从图像中每个像素坐标派生的二维颜色数组。滑块确定像素化矩形的大小,并以像素化形式重新绘制图像。在嵌套循环中,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
答案 0 :(得分: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来更快地绘制内容。
答案 1 :(得分:1)
你也可以从DOM中分离元素,应该优化性能:
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);
}