Canvas像素级操作进阶的关键是精准定位并修改指定区域像素：通过坐标映射计算ImageData.data起始索引，用双重循环安全遍历局部区域，只改目标部分后直接putImageData；高频场景可结合离屏Canvas预加载纹理实现高效局部滤镜。
Canvas像素级操作进阶的关键，在于不处理整张图，而是精准定位、读取并修改指定区域的像素数据。这需要理解坐标映射、边界控制和内存访问逻辑，而不是简单遍历整个data数组。
明确目标区域的像素起始位置
ImageData.data 是一维数组，按“从左到右、从上到下”顺序排列，每4个元素为一个像素（R、G、B、A）。要操作某块矩形区域（如 x=50, y=30, width=100, height=80），需先算出该区域在 data 数组中的起始索引：
- 行偏移：y × canvas.width → 跳过上面 y 行
- 列偏移：x × 4 → 每像素占4字节，向右移动 x 个像素
- 起始索引 = (y × canvas.width + x) × 4
例如 canvas 宽 800、高 600，想处理 (50,30) 开始的 100×80 区域，第一个像素对应 data[ (30×800 + 50) × 4 ] = data[96200]。
安全遍历局部像素，避免越界
直接用双重循环（i 行、j 列）更直观且不易出错。注意：内层循环 j 的范围是 0 到 width，外层 i 是 0 到 height，再通过公式计算每个像素在 data 中的位置：
- 索引 = (i + y) × canvas.width × 4 + (j + x) × 4
- 确保 i + y < canvas.height 且 j + x < canvas.width
- 推荐加 guard：if (i + y >= imageData.height || j + x >= imageData.width) continue;
只改目标区域，保留其余图像不变
调用 ctx.putImageData() 时，传入原始 ImageData 对象即可——你只改了其中一部分 data 值，其他像素保持原样。无需创建新 ImageData 或复制整图数据：
- ✅ 正确：获取全图 imageData → 修改局部 data → putImageData(imageData, 0, 0)
- ❌ 错误：只为局部区域 createImageData → 手动拷贝像素 → 容易错位或漏 alpha
若只想把效果“叠加”到画布某一块（比如只让右下角变灰），可先 getImageData(0,0,w,h)，处理后 putImageData 回原位置；无需清空或重绘其他部分。
结合离屏 Canvas 实现高效局部滤镜
对高频交互场景（如鼠标悬停区域实时反色），反复调用 getImageData/putImageData 仍可能卡顿。此时可用离屏 Canvas 预加载滤镜源图，并只读取其对应区域像素：
- 将滤镜纹理（如噪点图、渐变蒙版）画到隐藏的 offscreenCanvas 上
- 用 getImageData 获取该纹理的局部像素
- 在主图的 target 区域循环中，用纹理像素值混合/替换原像素（如：data[idx] = (data[idx] + textureData[tIdx]) / 2）
- 一次性 putImageData 回主画布
这样避免了每次重复 drawImage + getImageData 的开销，也规避了跨域限制对纹理图的影响。
