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

无法在JavaScript中使用putImageData更新HTML5画布像素颜色

1 个答案: