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

如何解决ImageData 数组中的索引逻辑是什么？

这个问题是为了更深入地理解我之前关于大尺寸Canvas动画的问题。问题在这里：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: 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。因为我们从左上角开始向右移动，所以它是倒置的，Y 是我们的第一个坐标，X 是我们的第二个坐标。从 0 X 0 到 0 X 9，我们总共记录了 40 个值（每个像素 4 个值，总宽度为 10 个像素）；从 1 X 0 到 1 X 3，我们总共记录了 16 个值。我们最后得到第 56 个索引，而不是我们使用公式计算的第 52 个。

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

解决方法

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

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

记住 arrays are indexed 为

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

不像

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