Canvas自由绘图与撤销重做需兼顾性能与准确性：用贝塞尔曲线拟合路径并节流绘制，以操作指令替代图像快照实现轻量撤销，封装命令对象统一调度，并归一化坐标、限制历史长度确保稳定。
Canvas画板的自由绘图体验和撤销重做功能，关键不在“能不能实现”，而在于“怎么存、何时存、存什么”。直接保存整张画布快照（toDataURL）看似简单，但内存暴涨、响应迟钝；只靠save()/restore()又只能回退绘制状态，无法还原实际画面。真正稳定可用的方案，得兼顾性能、准确性和可维护性。
自由绘图：别让线条断成“糖葫芦”
鼠标移动采样频率高、设备响应有延迟，若每移动一次就调用一次drawLine，极易出现点距过大、线条断裂或锯齿严重的问题。更合理的方式是累积点序列，在mouseup或节流后的mousemove中用贝塞尔曲线拟合路径，再一次性描边。
- 启用
ctx.lineCap = 'round'和ctx.lineJoin = 'round'，消除线段连接处的尖角 - 记录起始点、控制点、终点，用
quadraticCurveTo或bezierCurveTo平滑连线 - 对高频
mousemove做requestAnimationFrame节流，避免重复绘制同一帧
撤销重做：用操作记录代替图像快照
把每张toDataURL()塞进数组，画10步就可能吃掉几十MB内存——尤其在移动端极易触发OOM。更轻量的做法是记录“操作指令”，比如[{type:'line', points:[...], color:'#000', width:3}]，撤销时仅清除对应图形，而非重绘整个画布。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 每次完成一笔（如松开鼠标），将该笔的完整参数推入
historyStack - 撤销时从栈顶弹出一条指令，用
clearRect擦除其影响区域，或标记为隐藏 - 重做则将指令重新应用到当前画布，无需解码Base64或重建图像
- 配合
canvas.toBlob()异步导出快照作兜底备份，不常驻内存
状态管理：分离“绘制逻辑”与“历史控制”
撤销重做不是附加功能，而是贯穿绘图生命周期的状态契约。建议将画布操作封装为可序列化的命令对象，由统一的历史管理器调度：
- 定义
DrawCommand、EraseCommand、TextCommand等类，含execute()、undo()方法 - 所有绘图入口（鼠标、触控、导入）都生成并提交命令，不直接操作
ctx - 历史管理器维护
history和redoStack两个数组，暴露undo()、redo()接口 - 橡皮擦切换时，不修改笔刷模式，而是生成
EraseCommand，保持命令语义清晰
兼容性与边界处理
真实场景中，缩放、平移、多图层、手势操作都会干扰坐标映射，导致撤销后位置偏移或范围错乱。必须在记录操作前完成坐标归一化：
- 监听
canvas的transform变化（如缩放/平移），将原始事件坐标转换为画布坐标系下的绝对像素值 - 对矩形选区、文字框等复合元素，记录其
bounding box而非渲染结果，撤销时重绘更可控 - 限制
historyStack最大长度（如30步），超出时自动截断最早记录，防止内存无限增长 - 清空画布前先清空历史栈，并触发
clear命令入栈，确保重做链不断裂
