ImageData 数组中的索引逻辑是什么？

这个问题是为了更深入的理解我之前关于大尺寸Canvas动画的问题。问题在这里：重复 HTML 画布元素（框）以填充整个视口 https://stackoverflow.com/questions/65340502/repeat-html-canvas-element-box-to-fill-whole-viewport

我试图理解 TypedArray - Uint8ClampedArray 背后的逻辑。我将首先从我的研究开始，然后再讨论问题本身。

所以，ImageData代表HTML5 Canvas的像素数据。它可以实现更快的性能，并且适合重型动画。获得 ImageData 对象后，我们为其创建一个缓冲区空间。因为我们不能直接从缓冲区读取和写入，所以我们将此缓冲区传递给 TypedArray。在本例中，Uint8ClampedArray 就像普通数组一样，允许访问其中的数据。

画布上的每个像素都由 4 个整数值表示，分别代表红、绿、蓝、阿尔法（如 RGBA 中），范围从 0 到 255。每个值都分配给从 0 开始的 Uint8ClampedArray 索引，并且该数组被划分分成 4 个块。因此，前 4 个值是第一个像素，后 4 个值是第二个像素，依此类推。 Cavnas 像素从左到右逐行读取。

因此，如果我们想要获取位于处的像素红色值的数组索引xCoord = 3; yCoord = 1; canvasWidth = 10;。公式由MDN：使用画布进行像素操作 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas建议我们进行以下数学计算：

var red = y * (width * 4) + x * 4;= 1 * 10 * 4 + 3 * 4 = 52；

但是，如果我们尝试手动执行相同的操作，并且只是逐个像素地计算自己，则不会得到相同的值。总是有点不对劲。我们如何手动计算？在这张图中我们从0 X 0 to 0 X 9 and to 1 X 3。因为我们从左上角开始向右移动，所以它是倒置的Y是我们的第一个坐标X是我们的第二个坐标。从0 X 0 to 0 X 9我们总共记录 40 个值（每个像素 4 个值，总宽度 10 个像素）；从1 X 0 to 1 X 3我们总共记录了 16 个值。最后我们得到第 56 个索引，而不是我们使用公式计算的 52。

所以，请帮助我理解 Uint8ClampedArray 中的整个逻辑以及它是如何计算的。

从 1 X 0 到 1 X 3 我们总共记录了 16 个值

这 16 个字节中的最后 4 个字节确实表示 (3, 1) 处的像素。红色通道是其中的第一个通道，前面是左侧像素的 12 字节和第一行像素的 40 字节。它位于整个数组中的索引 52。

请记住数组有索引 https://softwareengineering.stackexchange.com/q/110804/66652 as

0   1   2
+---+---+--
|   |   |
+---+---+--

not as

+---+---+--
| 0 | 1 | 2
+---+---+--