如何優化畫布中的像素編輯

Question

我嘗試在JavaScript中使用一些圖片動畫，因此我必須使用像素進行操作，但問題在於像素的行走陣列需要很長時間，上下文的本機功能會執行此操作快多了。

該測試顯示它：

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

近似的結果是：0，14，12

它爲什麼會發生？手動更改像素的最快方法是什麼？

Answer 1

看一看：Faster Canvas Pixel Manipulation with Typed Arrays

而且here你可以自己運行的基準。