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