真涂鸦必须基于Canvas路径绘制：touchstart调用beginPath并记录起点，touchmove持续lineTo，touchend调用stroke；擦除需用destination-out合成模式；撤销/重做应维护ImageData快照栈；马赛克与涂鸦须分层处理。
涂鸦必须用 ctx.lineTo + ctx.stroke，不能只靠 ctx.fillRect
直接用 fillRect 画方块只是“画上去一层”，它不和原始图片融合，导出时会丢失（尤其在小程序和 App 端）。真涂鸦必须基于 Canvas 的路径绘制：监听 touchstart 记下起点，touchmove 持续调用 lineTo 追加点，touchend 调用 stroke 渲染整条线。否则轨迹断开、粗细不均、缩放后变形。
关键细节：
-
ctx.beginPath()必须在每次touchstart时调用，否则多条路径会连成一团 - 启用抗锯齿：
ctx.lineCap = 'round'、ctx.lineJoin = 'round'，避免拐角发虚或尖刺 - 移动端触摸坐标需减去 canvas 偏移量（
e.touches[0].clientX - canvas.offsetLeft），否则定位偏移 - H5 和小程序平台对
canvas-id处理不同：App 端必须用uni.createCanvasContext('id', this)；H5 端可直接操作 DOM canvas 元素
擦除不是“画白”，而是 globalCompositeOperation = 'destination-out'
用白色画笔覆盖 ≠ 擦除。原图是背景图，涂鸦是叠加层，擦除的本质是“把涂鸦层局部挖空”。正确做法是切换合成模式：ctx.globalCompositeOperation = 'destination-out'，再以相同路径重绘——此时绘制区域会把已有像素透明化，保留底层图片。
常见错误：
- 忘记还原合成模式，导致后续涂鸦也变透明
- 擦除时没重置
lineWidth，造成擦除宽度和画笔不一致 - 在 H5 端误用
clearRect，它清的是整个矩形区域，无法实现“跟随手指擦除”效果 - App 端 iOS 对
destination-out支持不稳定，建议先用getImageData+putImageData手动置 alpha=0 作为 fallback
撤销/重做依赖快照栈，别存 canvas.toDataURL
每次 touchend 后立刻调用 uni.canvasToTempFilePath 存为临时文件，性能差、IO 卡顿、且 H5 不支持。正确方式是维护一个 history: ImageData[] 数组，在每次完成一笔（即 stroke 后）调用 ctx.getImageData(0, 0, width, height) 快照当前像素状态。
注意点：
-
getImageData返回的是像素副本，修改它不影响 canvas，适合存档 - 撤销时用
ctx.putImageData(history.pop(), 0, 0)恢复，重做则从另一个栈 push 回来 - 每帧快照内存占用大，建议限制栈长度（如最多存 20 步），超出则丢弃最早记录
- App 端 Android 对大尺寸
ImageData有内存上限，宽高超过 1000px 时建议降采样后再快照
马赛克涂鸦和普通涂鸦不能共用同一 canvas
马赛克必须读写像素（getImageData / putImageData），而普通涂鸦是矢量路径绘制。两者混合会导致：马赛克区域被路径覆盖、涂鸦线条在马赛克块边缘断裂、导出时马赛克丢失。
推荐结构：
- 底层 canvas（隐藏）：加载原图，专用于马赛克计算和
putImageData - 中层 canvas（可见）：仅处理涂鸦、文字、贴纸等矢量操作
- 导出前，用
drawImage把底层 canvas 内容绘制到中层 canvas 上，再统一导出 - 马赛克块大小建议设为
16或24，太小看不出效果，太大糊成色块
真正麻烦的是坐标对齐——两层 canvas 宽高、缩放比例、位移偏移必须完全一致，否则马赛克区域和手指位置错位。最稳妥的做法是所有坐标运算统一基于原始图片尺寸，再按比例映射到 canvas 显示尺寸。
