推荐用 clearRect() 清空 Canvas 指定或整个区域，需用 canvas.width/height 而非 style 值，清除前应重置 transform 和 clip 状态，避免偏移或裁剪失效；禁用 fillRect 填透明色模拟清除。
清空 Canvas 指定区域用 clearRect()，重置整个画布也推荐用它——只要参数写对、状态理清，既高效又可靠。
清除指定区域：只清该清的，不碰其余
调用 ctx.clearRect(x, y, width, height) 即可擦除任意矩形区域：
- 坐标和尺寸单位是“逻辑像素”，必须基于
canvas.width和canvas.height（不是style.width或 CSS 缩放值） - 例如清除右上角 100×60 区域：
ctx.clearRect(canvas.width - 100, 0, 100, 60) - 多个邻近区域可先算包围矩形，一次清除更省性能，比如三个横排 30×30 区域 → 合并为
clearRect(x, y, 90, 30) - 清除前检查是否在画布范围内，避免无效调用：
if (x 0 && y + h > 0) { ... }
清空整个画布：别用错尺寸，也别漏重置状态
最常用且推荐的方式仍是 clearRect(0, 0, canvas.width, canvas.height)：
- 确保
canvas.width和canvas.height是你实际绘图所用的尺寸（初始化时显式设好，或响应式中用canvas.width = canvas.clientWidth动态同步） - 如果之前调过
ctx.translate()、ctx.rotate()或ctx.clip()，清除会偏移或被裁剪——清空前加ctx.setTransform(1, 0, 0, 1, 0, 0)和ctx.resetClip()（或ctx.restore()，前提是曾save()） - 不建议靠
canvas.width = canvas.width清屏，它虽能清空，但会重置所有绘图状态（颜色、字体、线宽、变换等），除非你真需要“硬重启”
补充技巧：应对缩放与高频更新
CSS 缩放或高 DPI 屏幕下容易出错，这几条很实用：
- 若用
transform: scale(2)显示画布，保持canvas.width/canvas.height与 CSS 尺寸匹配，或按window.devicePixelRatio调整内部分辨率 - 背景不变、局部频繁刷新（如指针、粒子）？把背景画到离屏 Canvas，主 Canvas 只负责动态区域的
clearRect+ 重绘，省掉重复背景绘制 - 调试时临时关掉 CSS 缩放，确认清除位置是否准确；清除后立即绘制新内容，减少上下文切换开销
别踩这些坑
常见失效原因就几个：
- 传了
canvas.style.width（字符串如 "400px"）给clearRect→ 参数变NaN，清除无效 - 用了
fillStyle = 'white'; fillRect(...)模拟擦除 → 颜色可能不一致，还多一次绘制 - 清除后没调
beginPath()就接着画线 → 旧路径残留，线条意外叠加 - 在
clip()后直接清除，却没resetClip()→ 看起来像“清不干净”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
