無法在 JavaScript 中使用 putImageData 更新 HTML5 畫布像素顏色

Question

這是我的完整代碼：

<canvas width="1366" height="768"></canvas>
<script> 
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;

for (var i = 0; i < data.length; i += 4) {
      data[i]     = 0;
      data[i + 1] = 0;
      data[i + 2] = 0;
    }
ctx.putImageData(imageData, 0, 0);
</script>

即使我已將每個單獨顏色通道的值設置為 0，畫布仍保持白色，就好像沒有任何變化一樣。

這是網頁上唯一的代碼，開發者控制台中沒有錯誤。

Answer 1

如評論中所述，您的 alpha 通道很可能是 0，使畫布透明。 要解決此問題，請在 for 循環中嘗試以下操作：

for (var i = 0; i < data.length; i += 4) {
   data[i]     = 0;
   data[i + 1] = 0;
   data[i + 2] = 0;
   data[i + 3] = 255;
}