为什么我的画布杂讯功能总是只显示红色？

我正在尝试根据我看到的代码笔将噪波效果应用于画布，这反过来似乎与SO答案非常相似。

我想产生一个随机透明像素的“屏幕”，但取而代之的是得到一个完全不透明的红色场。我希望对画布或类型数组更熟悉的人可以告诉我我做错了什么，也许可以帮助我了解一些正在使用的技术。

我对代码笔代码进行了重大重构，因为（暂时）我不关心动画噪声：

/**
 * apply a "noise filter" to a rectangular region of the canvas
 * @param {Canvas2DContext} ctx - the context to draw on
 * @param {Number} x - the x-coordinate of the top-left corner of the region to noisify
 * @param {Number} y - the y-coordinate of the top-left corner of the region to noisify
 * @param {Number} width - how wide, in canvas units, the noisy region should be
 * @param {Number} height - how tall, in canvas units, the noisy region should be
 * @effect draws directly to the canvas
 */
function drawNoise( ctx, x, y, width, height ) {
    let imageData = ctx.createImageData(width, height)
    let buffer32 = new Uint32Array(imageData.data.buffer)

    for (let i = 0, len = buffer32.length; i < len; i++) {
        buffer32[i] = Math.random() < 0.5
            ? 0x00000088 // "noise" pixel
            : 0x00000000 // non-noise pixel
    }

    ctx.putImageData(imageData, x, y)
}

据我所知，发生的核心是将ImageData的原始数据表示形式（一系列依次反映每个像素的红色，绿色，蓝色和alpha值的8位元素）包装在一个32位数组，使我们可以将每个像素作为一个统一的元组进行操作。我们得到一个数组，每个像素一个元素，而不是每个像素四个元素。

然后，我们遍历该数组中的元素，并根据噪声逻辑将RGBA值写入每个元素（即每个像素）。这里的噪声逻辑非常简单：每个像素都有大约50％的机会成为“噪声”像素。

噪声像素被分配了32位值0x00000088，该值（由于数组提供的32位分块）等于rgba(0, 0, 0, 0.5)，即黑色，不透明度为50％。

为非噪声像素分配了32位值0x00000000，该值为黑色0％不透明度，即完全透明。

有趣的是，我们不会将写入buffer32画布。取而代之的是，我们编写了imageData用于构造的Uint32Array，这使我相信我们正在通过某种传递引用来对imageData对象进行突变；我不清楚这是为什么。我知道值传递和引用传递在JS中通常是如何工作的（标量按值传递，对象按引用传递），但是在非类型化数组世界中，传递给数组构造函数的值仅决定数组的长度。显然这不是这里发生的事情。

如前所述，我得到的不是全部为50％或100％透明的黑色像素，而是一个全部为纯红色的像素。我不仅不希望看到红色，而且随机颜色分配的证据为零：每个像素都是纯红色。

通过使用两个十六进制值，我发现这会产生红色在黑色上的散射，并具有正确的分布类型：

buffer32[i] = Math.random() < 0.5
    ? 0xff0000ff // <-- I'd assume this is solid red
    : 0xff000000 // <-- I'd assume this is invisible red

但是它仍然是纯红色，纯黑色。基础画布数据均未显示出应不可见的像素。

令人困惑的是，除了红色或黑色之外，我没有其他颜色。除了100％不透明外，我也无法获得任何透明性。为了说明断开连接，我删除了random元素，并尝试将这9个值中的每个值写入每个像素，以查看会发生什么：

buffer32[i] = 0xRrGgBbAa
                         // EXPECTED   // ACTUAL
buffer32[i] = 0xff0000ff // red 100%   // red 100%
buffer32[i] = 0x00ff00ff // green 100% // red 100%
buffer32[i] = 0x0000ffff // blue 100%  // red 100%
buffer32[i] = 0xff000088 // red 50%    // blood red; could be red on black at 50%
buffer32[i] = 0x00ff0088 // green 50%  // red 100%
buffer32[i] = 0x0000ff88 // blue 50%   // red 100%
buffer32[i] = 0xff000000 // red 0%     // black 100%
buffer32[i] = 0x00ff0000 // green 0%   // red 100%
buffer32[i] = 0x0000ff00 // blue 0%    // red 100%

这是怎么回事？

编辑：与分配后，类似的（坏）结果Uint32Array和怪异的突变的基础上，对MDN文章ImageData.data：

/**
 * fails in exactly the same way
 */
function drawNoise( ctx, x, y, width, height ) {
    let imageData = ctx.createImageData(width, height)

    for (let i = 0, len = imageData.data.length; i < len; i += 4) {
        imageData.data[i + 0] = 0
        imageData.data[i + 1] = 0
        imageData.data[i + 2] = 0
        imageData.data[i + 3] = Math.random() < 0.5 ? 255 : 0
    }

    ctx.putImageData(imageData, x, y)
}