"imageData[ (width + height * stageHeight) * 4 -1 ]"是什么意思？

Question

dotPos(density, stageWidth, stageHeight) {
const imageData = this.ctx.getImageData(0, 0, stageWidth, stageHeight).data;
const imageData = this.ctx.getImageData(0, 0, stageWidth, stageHeight).data;
const particles = [];
let i = 0;
let width = 0;
let pixel;
for (let height = 0; height < stageHeight; height++) {
++i;
const slide = i % 2 === 0;
width = 0;
if (slide === 1) {
width += 6;
}
for (width; width < stageWidth; width += density) {
pixel = imageData[(width + height * stageWidth) * 4 - 1];
if (pixel !== 0 && width > 0 && width < stageWidth && height > 0 && height < stageHeight) {
particles.push({
x: width,
h: height,
});
}
}
}

我正在研究上面的代码，但我不知道下面这行是什么意思：

pixel = imageData[(width + height * stageWidth) * 4 - 1]; 

请帮帮我。

Answer 1

ImageData的data是一个Uint8ClampedArray，它线性地表示ImageData的像素。此平面阵列的每个项表示每个像素的"红色"、"绿色"、"蓝色"one_answers"Alpha"值
因此，要遍历每个像素，实际上一次需要跳4个项目，因此需要* 4
由于此数据是平面的，因此要恢复笛卡尔模型，需要将y值乘以ImageData的宽度，然后再加上x值。

i:5 x：2 y：1

i:0 x：0 y：0	i:1 x：1 y：0	i：2 x：2 y：0
i:3 x：0 y：1	i:4 x：1 y：1
i:6 x：0 y：2	i:7 x：1 y：2	1:8 x：2 y：2[/td>