如何填充畫布像素？

Question

我想設置畫布上所有像素的顏色。我很確定我知道它是如何工作的：canvas.getContext("2d").getImageData.data中的前4個值是指第一個像素的r，g，b和a，第二個4代表第二個像素，依此類推。我想知道什麼是錯，此代碼：

function draw() 
{ 
    var cnvs = document.getElementById("CanvasFlynn"); //Assume it's 2x2 pixels 
    var cont = cnvs.getContext("2d"); 
    var imdt = cont.getImageData(0,0,2,2); 
    var r  = [ 255 , 0 , 0 , 255 ]; 
    var g  = [ 0 , 255 , 0 , 255 ]; 
    var b  = [ 0 , 0 , 255 , 255 ]; 
    var a  = [ 1 , 1 , 1 , 1 ]; 
    var index = 0; 
    for (var i = 0 ; i < imdt.data.length ; i++) 
    { 
     index    = 4*i; 
     imdt.data[index] = r[i]; 
     imdt.data[index+1] = g[i]; 
     imdt.data[index+2] = b[i]; 
     imdt.data[index+3] = a[i]; 
    } 
} 

如果有人能告訴我，爲什麼這不會改變畫布像素顏色，那就會動搖（我不實際使用一個2x2的卡瓦酒，那只是作爲一個例子）。

Answer 1

有一堆問題

1. cont.getImageData是一個函數不是財產

2. imdt不是畫布的圖像數據，這是在畫布上的圖像數據的副本。

   你需要調用cont.putImageData將數據複製回到畫布

3. imdt.data.length是字節而不是像素的計數。每個像素有4個字節。

4. alpha是在0至255的範圍中的圖像數據

function draw() 
 
{ 
 
    var cnvs = document.getElementById("CanvasFlynn"); //Assume it's 2x2 pixels 
 
    var cont = cnvs.getContext("2d"); 
 
    var imdt = cont.getImageData(0, 0, 2, 2); 
 
    var r  = [ 255 , 0 , 0 , 255 ]; 
 
    var g  = [ 0 , 255 , 0 , 255 ]; 
 
    var b  = [ 0 , 0 , 255 , 255 ]; 
 
    var a  = [ 255 , 255 ,255 ,255 ]; 
 
    var index = 0; 
 
    for (var i = 0 ; i < imdt.data.length/4 ; i++) 
 
    { 
 
     index    = 4*i; 
 
     imdt.data[index] = r[i]; 
 
     imdt.data[index+1] = g[i]; 
 
     imdt.data[index+2] = b[i]; 
 
     imdt.data[index+3] = a[i]; 
 
    } 
 
    
 
    cont.putImageData(imdt, 0, 0); 
 
} 
 
draw();

<p>Note the 2x2 canvas will be stretched to 100x100 and may be bilinear filtered</p> 
 
<canvas id="CanvasFlynn" width="2" height="2" 
 
style="width: 100px; height: 100px; border: 1px solid black; image-rendering: pixelated;"></canvas>