Ich versuche, mithilfe der Pixelmanipulation der HTML 5-Zeichenfläche einige dynamische visuelle Effekte zu erzielen, stoße jedoch auf ein Problem, bei dem das Festlegen von Pixeln im CanvasPixelArray lächerlich langsam ist.

Zum Beispiel, wenn ich Code habe wie:

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

Wenn Sie mit Chrome ein Profil erstellen, wird es 44% langsamer ausgeführt als der folgende Code, in dem CanvasPixelArray nicht verwendet wird.

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

Meine Vermutung ist, dass der Grund für diese Verlangsamung in der Konvertierung zwischen den Javascript-Doubles und den internen 8-Bit-Ganzzahlen ohne Vorzeichen liegt, die vom CanvasPixelArray verwendet werden.

Ist diese Vermutung richtig?Ist es trotzdem nötig, um den Zeitaufwand für das Festlegen von Werten im CanvasPixelArray zu verringern?