清空Canvas应绑定按钮click事件调用clearRect(0,0,canvas.width,canvas.height)，确保使用真实宽高、重置变换和路径，避免重设width/height导致状态丢失。
点击按钮清空 Canvas，核心就是把清空逻辑绑定到按钮的 click 事件上，而不是靠刷新页面或重载 canvas 元素。关键在于：清空动作必须在已有 ctx（2D 上下文）上执行，且不能漏掉路径重置或坐标系陷阱。
绑定 click 事件并调用 clearRect
这是最常用、最直接的方式。按钮触发后，立即清除整个画布可视区域。
- 确保你已通过
canvas.getContext('2d')获取过上下文，并保存为变量（比如ctx），否则每次点击都要重复获取，不必要且易出错 - 清空范围必须用
canvas.width和canvas.height，不是 CSS 设置的宽高——后者可能被缩放，会导致清除偏移或残留 - 示例代码片段：
const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); document.getElementById('clearBtn').addEventListener('click', () => { ctx.clearRect(0, 0, canvas.width, canvas.height); });
避免重设 width/height 导致状态丢失
有人会写 canvas.width = canvas.width 来清空，这确实有效，但会连带重置所有绘图状态（fillStyle、strokeStyle、font、transform 等），后续绘制要重新设置，容易出 bug。
- 仅当你明确需要“彻底重启”上下文时才用该方式，比如切换主题或重载整个绘图环境
- 普通清空操作中，
clearRect更安全、更可控 - 如果误用了重设宽高，又想保留某些样式，只能手动缓存再恢复，徒增复杂度
清空前检查是否真有内容可清
高频点击或动画中反复清空，可能造成视觉闪烁或性能浪费。可以加一层轻量判断。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
立即学习“前端免费学习笔记（深入）”；
- 用
ctx.isPointInPath或记录绘图标记（如hasDrawn = true）来区分“空画布”和“已绘制”状态 - 对离屏 canvas 或分层渲染场景，清空主 canvas 前先确认目标层是否真的发生了变化
- 不要依赖
canvas.toDataURL()做对比——它开销大，且 base64 字符串比对不可靠
注意 transform 和 clip 的残留影响
如果你之前调用了 ctx.scale()、ctx.translate() 或 ctx.clip()，clearRect 仍会受其影响：清除区域可能被缩放、偏移，甚至只在裁剪区内生效。
- 清空前建议先重置变换：
ctx.setTransform(1, 0, 0, 1, 0, 0) - 如果用了裁剪，记得
ctx.restore()或显式清除裁剪状态（ctx.resetClip()，需现代浏览器支持） - 更稳妥的做法是：清空 → 重置 → 绘制，形成可预测的执行流
真正容易被忽略的，不是“怎么绑事件”，而是清空后没重置路径（ctx.beginPath()）导致下一帧绘制出现意外连线，或者在高 DPI 屏幕上没同步 canvas.width 与 devicePixelRatio 导致清除模糊——这些不会报错，但会让动画看起来“粘滞”或“发虚”。
