putImageData 是直接将 ImageData 对象的像素块以 1:1 方式贴到 canvas 指定位置，不经过绘图管线；数据必须为 createImageData 或 getImageData 生成的 ImageData，含 data（Uint8ClampedArray）、width、height；dx/dy 按逻辑像素计算，无视 transform 和 CSS 缩放；需复用 ImageData 避免频繁内存分配；跨域污染不影响 putImageData 写入。
Canvas 的 putImageData 不是“画”像素，而是直接把内存里的像素块“贴”到画布指定位置，不经过任何绘图管线（比如抗锯齿、合成、变换），纯位图覆盖。
数据来源必须是 ImageData 对象
不能传普通数组或 TypedArray（如 Uint8ClampedArray）直接进去。必须用 createImageData() 创建，或从 getImageData() 获取。这是因为 ImageData 包含三个关键属性：data（像素字节数组）、width、height，Canvas 需要它们来校验和定位。
- 如果 width/height 和 canvas 实际尺寸不匹配，它只写入交集区域（超出部分被截断）
-
data必须是Uint8ClampedArray，每个像素占 4 字节：R、G、B、A（0–255），顺序排列 - 即使你只改了其中几个像素，也要传整个 ImageData；它不会“增量更新”
坐标原点在左上角，且不支持缩放/旋转
putImageData(imageData, dx, dy) 中的 dx、dy 是目标区域左上角在 canvas 坐标系中的位置（单位：CSS 像素）。Canvas 不会按当前 transform 缩放或旋转这个数据块——它总是以 1:1 像素对齐方式贴上去。
- 若 canvas 有 CSS 缩放（如
style="width:400px; height:300px;"但 canvas.width=800、height=600），dx/dy仍按逻辑像素（即 canvas.width/height 定义的坐标系）计算 - 想实现缩放效果？得自己用
createImageData生成更大/更小的缓冲区，再插值填充，然后 put - 透明通道（alpha）会被直接写入，覆盖原有 alpha 值；不是“半透明叠加”，而是完全替换
性能关键：避免频繁创建 ImageData
每次调用 createImageData(w, h) 都分配新内存；putImageData 本身很快，但反复创建+填充+销毁会触发 GC，拖慢动画。
- 建议复用 ImageData：创建一次，用
data.set(newBytes)更新内容 - 如果只改局部像素，可先
getImageData(x,y,w,h)拿子区域，修改后putImageData回原位置，比全量操作省资源 - 注意：
getImageData会读取 canvas 当前状态（含之前所有绘制），而putImageData是写入，两者不互锁，但频繁读-改-写易成瓶颈
安全限制：跨域图像无法读取，但可写入
如果 canvas 已被跨域图像污染（drawImage 了一个没 CORS 的图片），调用 getImageData 会抛 SecurityError；但 putImageData 不受此限——只要数据是你自己生成的（比如噪声、算法渲染），就能正常写入。
- 这意味着你可以用 JS 算法生成图像（如分形、粒子模拟），完全绕过图片加载限制
- 但要注意：写入后若再尝试
toDataURL()或toBlob()，结果仍是可用的（不受污染影响） - 不过，一旦执行过
drawImage跨域图，后续所有getImageData都失败，哪怕你之后又用putImageData覆盖了全部像素
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
