getimagedata 返回的是一维 uint8clampedarray，按行优先、rgba 顺序存储像素数据，每个像素占4个连续字节，索引计算公式为 (y width + x) 4，修改后需调用 putimagedata 才能更新画布。
canvas getImageData 返回的 data 是什么结构
getImageData 拿到的不是二维数组，而是一维 Uint8ClampedArray，按行优先、RGBA 顺序平铺。比如画布宽 2 像素、高 1 像素，data 长度就是 2 * 1 * 4 = 8，索引 0–3 对应第一个像素的 R、G、B、A，4–7 对应第二个像素。
常见错误是直接用 data[y][x] 访问——这会报 TypeError: Cannot read property 'x' of undefined，因为 data 根本没有嵌套结构。
- 每个像素占 4 个连续字节：
data[i]= R，data[i+1]= G，data[i+2]= B，data[i+3]= A - 第
x列、第y行像素的起始索引是(y * width + x) * 4 - A 值范围是 0–255，不是 0–1；0 表示完全透明，255 表示不透明
修改像素后必须用 putImageData 写回画布
只改 data 数组内容，画布本身不会变。很多人调完 getImageData、循环改了 data，就以为完事了，结果页面毫无反应——漏了最关键的 putImageData 步骤。
注意 putImageData 的第三个、第四个参数是「目标绘制区域左上角坐标」，不是源数据的偏移。如果只想把处理后的数据贴回原位，通常传 0, 0 即可。
-
putImageData不会自动缩放或裁剪：传入的ImageData尺寸必须和 canvas 当前width/height匹配（否则部分区域可能被截断） - 频繁调用
putImageData性能较差，批量改完再写一次，别每改一个像素就写一次 - 若 canvas 使用了 CSS 缩放（如
style="width: 400px; height: 300px;"），务必确保其canvas.width和canvas.height是实际像素尺寸，否则getImageData会读错区域
灰度化示例：手动遍历 data 修改每个像素
下面这段代码把整个 canvas 区域转为灰度（加权平均法），它展示了最基础但完整的像素操作链路：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
<p>for (let i = 0; i 0.299 + g 0.587 + b * 0.114;
data[i] = data[i + 1] = data[i + 2] = gray;
// A 保持不变
}</p><p>ctx.putImageData(imageData, 0, 0);</p>
关键点：循环步长是 4，每次处理一个像素；gray 是 float，但赋值给 data[i] 时会自动截断为整数（Uint8ClampedArray 特性）。
性能差？别在主线程做大量像素计算
对 1000×1000 的 canvas 做逐像素遍历，JavaScript 在主线程跑完可能卡顿 50ms 以上。用户拖动、点击会明显感知卡顿。
- 简单滤镜（如灰度、反色）可以接受；复杂运算（高斯模糊、卷积）建议用
OffscreenCanvas+ Web Worker - Chrome/Firefox 支持
OffscreenCanvas，可在 worker 中调用getContext('2d')，避免阻塞 UI - 更重的图像处理，考虑 WebGL（
WebGLRenderingContext）或 WASM，但门槛高很多 - 别用
setTimeout或requestIdleCallback分片处理——像素操作本身是纯计算，分片反而增加调度开销，不如一次算完或换底层方案
真正容易被忽略的是：canvas 的 width/height 属性和 CSS 样式是两套系统，改了 CSS 不等于改了像素格数，getImageData 只认前者。这点出错，后面所有像素坐标都会偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
