javascript - 为什么设置HTML5的CanvasPixelArray值非常慢，我如何才能更快呢？

我正在尝试使用HTML 5 canvas的像素操作来实现一些动态视觉效果，但是我遇到了一个问题，即在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 double 与CanvasPixelArray使用的内部无符号8位整数之间的转换。

这个猜测正确吗？

是否可以减少在CanvasPixelArray中设置值所花费的时间？

最佳答案

尝试缓存对data像素数组的引用。您的速度下降可能归因于对imageData.data的其他属性访问。有关更多说明，请参见this article。

例如。这应该比您目前拥有的更快。

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

关于javascript - 为什么设置HTML5的CanvasPixelArray值非常慢，我如何才能更快呢？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2573212/