canvas撤销重做需手动实现，核心方案有快照法（精确但耗内存）和命令法（省内存但逻辑复杂），可混合使用或借助fabric-history等库，移动端需注意防抖与高dpi适配。
Canvas 本身不自带撤销重做功能，必须靠开发者手动记录操作并还原。核心思路就两个：要么存画布快照，要么存绘制命令。选哪种取决于你对性能、内存和精确度的权衡。
用快照方式实现（简单直接）
每次画完一笔，调用 canvas.toDataURL() 把当前画布转成 Base64 图片字符串，推入 undo 栈。撤销时弹出栈顶快照，用 drawImage() 重新画到画布上，同时把刚撤销的状态压入 redo 栈。
- 优点：实现快，还原 100% 精确，适合操作步数不多（比如 ≤20 步）或画布尺寸不大（如签名板）的场景
- 缺点：每存一张图就占几KB~几十KB内存，连续画几十笔可能卡顿或 OOM
- 关键点：别在
mousemove频繁触发时都存——建议只在mouseup或touchend后存一次；清空画布前也要先存快照
用命令方式实现（省内存、可扩展）
不存图片，而是把每次绘图动作抽象成“命令对象”，例如：
{ type: 'line', from: [10,20], to: [80,50], style: { lineWidth: 3, strokeStyle: '#000' } }
把这些对象依次存入 undo 栈。撤销时，不是重绘整张图，而是从栈里弹出最后一条命令，再用 clearRect 擦掉对应区域，或反向执行（如画线就擦线）。
- 优点：体积小，支持无限步数，方便加滤镜、图层、选中编辑等高级功能
- 缺点：重放逻辑要自己写，复杂图形（如贝塞尔曲线、文字、图片）还原容易出错
- 实用技巧：可混合使用——每 5~10 条命令存一个完整快照，既控制重放开销，又避免栈太深
用现成库快速集成（省心省力）
如果你用 fabric.js 做图形编辑，推荐直接装 fabric-history 插件：
- NPM 安装：
npm install fabric-history - 引入后只需一行：
canvas.undo()或canvas.redo() - 它自动监听所有 fabric 对象增删改，并支持排除某些对象（比如辅助线、水印）不进历史
纯原生 Canvas 场景下，也可封装一个轻量类，管理两个数组：undoStack 和 redoStack，配合 saveState()、undo()、redo() 三个方法，代码不到百行就能跑起来。
移动端和高 DPI 的注意事项
撤销重做在触屏设备上容易误触，建议：
- 给撤销/重做按钮加防抖（300ms 内不响应重复点击）
- 高 DPI 屏幕（如 iPhone Retina）下，
canvas.width/height要设为物理像素，再用style.width/height缩放到 CSS 像素，否则快照模糊，撤销后线条发虚 - 触摸事件需统一处理：
touchstart→touchmove→touchend，别漏掉touchcancel
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
