Я пытаюсь сделать некоторые динамические визуальные эффекты, используя манипуляцию пикселов 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 показывает, что он работает на 44% медленнее, чем следующий код, в котором CanvasPixelArray не используется.
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 и внутренними целыми целыми 8-битными знаками, используемыми CanvasPixelArray.
- Правильно ли это предположение?
- Есть ли способ сократить время, затрачиваемое на установление значений в CanvasPixelArray?