为什么设置HTML5的CanvasPixelArray值非常慢,我怎么能更快地完成它？

Question

我正在尝试使用HTML 5画布'像素操作来做一些动态视觉效果,但我遇到了一个问题,即在CanvasPixelArray中设置像素的速度非常慢.

例如,如果我有以下代码:

imageData = ctx.getImageData(0, 0, 500, 500);

for (var i = 0; i < imageData.length; i += 4){
    imageData.data[i] = buffer[i];
    imageData.data[i + 1] = buffer[i + 1];
    imageData.data[i + 2] = buffer[i + 2];
}

ctx.putImageData(imageData, 0, 0);

使用Chrome进行分析显示,它比不使用CanvasPixelArray的以下代码运行速度慢44%.

tempArray = new Array(500 * 500 * 4);
imageData = ctx.getImageData(0, 0, 500, 500);

for (var i = 0; i < imageData.length; i += 4){
    tempArray[i] = buffer[i];
    tempArray[i + 1] = buffer[i + 1];
    tempArray[i + 2] = buffer[i + 2];
}

ctx.putImageData(imageData, 0, 0);

我的猜测是这种减速的原因是由于Javascript双精度和CanvasPixelArray使用的内部无符号8位整数之间的转换.

1. 这个猜测是否正确？
2. 无论如何减少在CanvasPixelArray中设置值所花费的时间？

Answer 1

尝试缓存对data像素阵列的引用.您的减速可能归因于额外的财产访问imageData.data.有关更多说明,请参阅此文章.

例如,这应该比你现在拥有的更快.

var imageData = ctx.getImageData(0, 0, 500, 500),
    data = imageData.data,
    len = data.length;

for (var i = 0; i < len; i += 4){
 data[i] = buffer[i];
 data[i + 1] = buffer[i + 1];
 data[i + 2] = buffer[i + 2];
}

ctx.putImageData(imageData, 0, 0);