Wie Pixel-Bearbeitung in Leinwand zu optimieren

Question

Ich versuche, einige Bildanimation in JavaScript cnavas, so dass ich mit Pixeln manipulieren muss, aber das Problem ist, dass das Gehen Array von Pixel dauert viel Zeit, die nativen Funktionen des Kontexts tun es viel schneller.

Dieser Test zeigt es:

<canvas width="600" height="400" id="canvas"></canvas> 
<script type="text/javascript"> 
ctx = document.getElementById('canvas').getContext("2d"); 
// Test 1 
var date1 = new Date(); 
ctx.fillRect(100, 100, 200, 200); 
// Test 2 
var date2 = new Date(); 
var imageData = ctx.getImageData(0, 0, 600, 400); 
var i, j, p; 
for(i = 100; i < 300; ++i) 
    for(j = 100; j < 300; ++j) { 
     p = (i * 600 + j) * 4; 
     imageData.data[p] = 0; 
     imageData.data[p + 1] = 0; 
     imageData.data[p + 2] = 0; 
     imageData.data[p + 3] = 255; 
    } 
ctx.putImageData(imageData, 0, 0); 
// Test 3 
var date3 = new Date(); 
var imageData = ctx.getImageData(100, 100, 200, 200); 
var i, j, p; 
for(i = 0; i < 200; ++i) 
    for(j = 0; j < 200; ++j) { 
     p = (i * 200 + j) * 4; 
     imageData.data[p] = 0; 
     imageData.data[p + 1] = 0; 
     imageData.data[p + 2] = 0; 
     imageData.data[p + 3] = 255; 
    } 
ctx.putImageData(imageData, 100, 100); 
var date4 = new Date(); 

alert("fillRect: " + (date2.getTime() - date1.getTime()) + "\ngetImageData(full): " + (date3.getTime() - date2.getTime()) + "\ngetImageData(part): " + (date4.getTime() - date3.getTime())); 
</script> 

Die ungefähren Ergebnisse sind: 0, 14, 12.

Warum geschieht das? Was ist der schnellste Weg, Pixel manuell zu ändern?

Answer 1

Werfen Sie einen Blick auf: Faster Canvas Pixel Manipulation with Typed Arrays

Und here Sie die Benchmark selbst ausführen können.