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

Question

这个问题是为了更深入地理解我之前关于大尺寸Canvas动画的问题。问题在这里:Repeat HTML canvas element (box) to fill whole viewport
我试图理解 TypedArray - Uint8ClampedArray 背后的逻辑。我将首先从我的研究开始，然后再讨论问题本身。
因此，ImageData 表示 HTML5 Canvas 的像素数据。它允许更快的性能并且适用于繁重的动画。在我们拥有 ImageData 对象之后，我们为它创建了一个缓冲区空间。因为我们不能直接从/写入缓冲区，所以我们将此缓冲区传递给 TypedArray。在这种情况下， Uint8ClampedArray 就像一个普通数组，并允许访问其中的数据。
Canvas 上的每个像素由 4 个整数值表示，分别代表红、绿、蓝、阿尔法 - 如在 RGBA 中 - 范围从 0 到 255。这些值中的每一个都被分配给一个从 0 开始的 Uint8ClampedArray 索引，并划分数组成 4 个块。所以前 4 个值是第一个像素，第二个 4 个值是第二个像素，依此类推。 Cavnas 像素从左到右逐行读取。
因此，例如，如果我们想获取 xCoord = 3; yCoord = 1; canvasWidth = 10; 处像素的红色值的数组索引.来自 MDN: Pixel manipulation with canvas 的公式建议我们做以下数学运算:var red = y * (width * 4) + x * 4; = 1 * 10 * 4 + 3 * 4 = 52；
但是如果我们尝试手动执行相同的操作，并且只是逐个像素地计算我们自己，我们不会得到相同的值。它总是有点过时。我们如何手动计算？在这张图片中，我们从 0 X 0 开始至 0 X 9并到 1 X 3 .因为我们从左上 Angular 开始向右移动，所以它是倒置的，是 是我们的第一个坐标和 X 是我们的第二个坐标。来自 0 X 0至 0 X 9我们总共记录了 40 个值(每个像素 4 个值，总宽度为 10 个像素)；来自 1 X 0至 1 X 3我们总共记录了 16 个值。我们最后得到第 56 个索引，而不是我们使用公式计算的第 52 个。
所以，请帮助我理解 Uint8ClampedArray 中的整个逻辑以及它是如何计算的。

Answer 1

From 1 X 0 to 1 X 3 we record 16 values in total

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

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

不像

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