为什么 Javascript Canvas putImageData 将白色图像绘制到屏幕上？

Question

我正在尝试为 canvas 绘制一个灰色渐变（或实际上是其中的一些）。为此，我使用 canvas 的 getImageData() 和 putImageData() 方法。 data 是一个大小为 1000 * 1000 * 4 的 Uint8ClampedArray。在 for 循环中，数据的 rgb 颜色元素正确设置为 x%255，如将 data 数组打印到控制台所示。但是，代码的结果与预期的不同。显示了一个完全白色的 cnvas，而预期有 4 个灰色渐变。
最小工作示例：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <canvas id = "canvas" width = "1000" height = "1000"></canvas>
        <script>
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            draw();

            function draw(){
                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                const data = imageData.data;

                for(let y = 0; y < canvas.height; y++){
                    for(let x = 0; x < canvas.width; x++){

                        for(let color = 0; color < 3; color++){
                            let idx = (y * canvas.width + x) * 4;
                            data[idx + color] = x % 255;
                        }
                    }
                }
                ctx.putImageData(imageData, 0, 0);         
            }
        </script>
    </body>
</html>

Answer 1

您没有设置 Alpha 通道。

for (let y = 0; y < canvas.height; y++) {
  for (let x = 0; x < canvas.width; x++) {

    let idx = (y * canvas.width + x) * 4;
    for (let color = 0; color < 3; color++) {
      data[idx + color] = x % 255;
    }
    data[idx + 3] = 255; // alpha
  }
}

为什么 Javascript Canvas putImageData 将白色图像绘制到屏幕上？

Why is Javascript Canvas putImageData drawing a white image to screen?

html

javascript

canvas

html5-canvas

putimagedata