putImageData不顯示圖像

Question

我使用以下函數更新canvas元素的內容，其中frame_data是width*height*3的數組。

function updateCanvas(frame_data, width, height) { 
    img = ctx.createImageData(width, height); 

    for (i=0, j=0; j < frame_data.length; i++) { 
     if ((i > 0) && (i%3==0)) { 
      img.data[i] = 255; 
     } else { 
      img.data[i] = frame_data[j++]; 
     } 
    } 
    ctx.putImageData(img, 0, 0); 
}` 

它似乎並沒有在Chrome 8的工作，因爲我得到這個圖像的結果：

我檢查這個功能和產生的img.data陣列數據是正確的。所以我認爲問題出在putImageData函數。有沒有其他人遇到同樣的問題？什麼可能是錯的？

Answer 1

畫布imagedata數組不是每個像素[r，g，b] 3項，但4 [r，g，b，a]，所以如果％3應該設置alpha值，它應該真的是％4。當前，第一個條目（0）的例外，然後它將第四個條目（i = 3）設置爲255（正確），但是接下來它將第七個條目（i = 6）設置爲255 ，這意味着你有[r，g，b，a，r，g，a，b]而不是[r，g，b，a，r，g，b，a]，並且隨着時間的推移它會變得更糟。

嘗試

function updateCanvas(frame_data, width, height) { 

    img = ctx.createImageData(width, height); 

    for (i=0;j=0; j < frame_data.length; j=j+3) { 
      img.data[i] = frame_data[j]; 
      img.data[i+1] = frame_data[j+1]; 
      img.data[i+2] = frame_data[j+2]; 
      img.data[i+3] = 255; 
      i+=4; 
    } 
    ctx.putImageData(img, 0, 0); 
}`