Canvas撤销重做应存操作、控状态、按需重绘：保存结构化绘图指令而非图片快照，用双栈（history+redoStack）与currentIndex管理状态，重绘时清空并逐条执行指令，兼顾轻量性、一致性与可扩展性。
用绘图指令代替图片快照
每次用户画一笔（比如拖动鼠标画线），不立刻截图，而是生成并保存一条结构化指令：
-
类型：如
"line"、"rect"、"circle" - 参数：起点、终点、颜色、线宽、是否填充等
- 时间戳或唯一ID（可选）：便于调试或合并连续小操作
例如：{ type: "line", points: [{x:10,y:20}, {x:80,y:60}], stroke: "#000", width: 2 }。所有指令统一存进一个数组（即“操作历史”），比存 base64 图片省 90% 以上内存。
双栈管理 + 索引定位
撤销/重做本质是状态游走，靠三个变量协同控制：
- history 数组：存放全部已确认的操作指令（不是每帧，而是每“步”有意义的绘制）
- currentIndex：当前生效到第几条指令（从 0 开始，-1 表示空白画布）
- redoStack：暂存被撤销掉但可能重做的指令（不是副本，是原数组切片引用）
执行 undo() 就是 currentIndex--，然后清空画布、重放 history[0..currentIndex]；redo() 则 currentIndex++，重放多一条。新操作发生时，自动截断 history 后续内容，并清空 redoStack。
重绘逻辑要干净且幂等
重绘不是“把历史全塞回去”，而是每次从头开始——先 ctx.clearRect()，再遍历 history.slice(0, currentIndex + 1)，逐条执行对应绘制逻辑。这样能确保：
- 状态绝对一致（不受中间 canvas 变换、裁剪等干扰）
- 支持动态修改单条指令（比如编辑某段文字内容后，只重绘它）
- 方便加滤镜、缩放、导出 SVG 等高级能力
建议把每类指令封装成独立渲染函数，例如 renderLine(ctx, op)、renderRect(ctx, op)，主重绘循环只负责调度，不掺杂业务细节。
边界与优化点
实际落地时要注意几个易踩坑的地方：
-
操作聚合：鼠标移动中连续触发的点，别每帧存一条线段，应聚合成折线（
points: [...]）再存 - 最大历史长度：设个上限（如 50 步），超限时 shift 掉最老的一条，防内存泄漏
- 非绘图操作也入栈：比如清空画布、切换笔色、插入贴纸，都算一步，保持操作流完整
- 避免重复保存：监听的是“完成动作”（mouseup / touchend），不是“每移动一次”
不复杂但容易忽略。
