getImageData可精确读取Canvas指定区域像素数据，返回含RGBA值的一维数组，用于图像处理等；需配合putImageData重绘，受同源策略和性能限制。
使用 getImageData 可以精确读取 Canvas 上任意区域的像素数据，返回一个包含 RGBA 值的一维数组，是实现图像处理、颜色分析、碰撞检测等效果的基础。
获取指定区域的像素数据
getImageData(x, y, width, height) 从画布坐标 (x, y) 开始，截取宽 width、高 height 的矩形区域。注意：该方法只读取已绘制内容，且受同源策略限制（跨域图片需设置 crossOrigin）。
- 参数
x和y是画布内的左上角坐标，不是 CSS 坐标或屏幕坐标 - 返回对象包含
data（Uint8ClampedArray）、width、height三个属性 -
data是按行主序排列的 RGBA 数组，每 4 个连续元素代表一个像素：[R, G, B, A]
理解并遍历像素数组
假设获取了 const imageData = ctx.getImageData(0, 0, 100, 100)，那么 imageData.data.length === 100 × 100 × 4 === 40000。要访问第 i 行第 j 列像素：
- 索引位置为
(i * imageData.width + j) * 4 - R 值在
index，G 在index + 1，B 在index + 2，A 在index + 3 - A 值范围是 0–255，0 表示完全透明，255 表示完全不透明
修改像素后重新绘制到画布
getImageData 返回的是副本，修改它不会自动更新画布。如需显示效果，必须调用 putImageData：
- 先用
getImageData获取数据 - 遍历
imageData.data修改 R/G/B/A 值（例如灰度化、反色、阈值处理） - 再用
ctx.putImageData(imageData, x, y)将结果写回画布指定位置 - 注意：若修改后想覆盖原区域，
x和y应与获取时一致
常见注意事项与性能提示
频繁调用 getImageData 会带来性能开销，尤其在动画中。实际使用时要注意：
- 避免在每帧都读取整张大画布；可限定区域或降采样处理
- 不要直接对
imageData.data使用push或map—— 它是固定长度的类型化数组 - 跨域图片未正确设置
img.crossOrigin = 'anonymous'会导致安全错误 - Canvas 若被 CSS 缩放，
getImageData仍按逻辑像素（canvas.width/height）操作，而非显示尺寸
