clearRect()清除特定区域最高效，应直接调用且避免重绘；多区域可合并为包围矩形一次清除；高频变化区域宜用离屏Canvas缓存背景；CSS缩放时需同步调整canvas尺寸或坐标系。
Canvas清除特定区域时，直接用clearRect()最高效，避免重绘或全量清空。
优先使用clearRect()而非重绘
清除局部区域应直接调用context.clearRect(x, y, width, height)。它底层由浏览器原生实现，不触发重排重绘，比用fillRect()填色、或重新绘制背景等方式快得多。
- 不要用
fillStyle = 'white'; fillRect(x,y,w,h)模拟擦除——颜色可能不匹配，且多一次绘制开销 - 避免
clearRect(0,0,canvas.width,canvas.height)后再重画整个画面——仅需清除部分时纯属浪费 - 若该区域后续要绘制新内容，
clearRect后立即绘制，减少状态切换
批量清除时合并矩形区域
当需清除多个相邻或可合并的区域，先计算包围矩形（bounding box），再单次clearRect，比多次调用更省CPU和GPU指令提交开销。
- 例如清除3个水平紧邻的20×20区域，可合并为1个60×20矩形
- 用
Math.min/max快速算出x/y/w/h，无需引入复杂几何库 - 注意：仅适用于无重叠遮挡逻辑的场景；若有图层叠加，需按实际渲染顺序处理
高频清除场景下启用离屏Canvas缓存
若某块区域内容频繁变化（如粒子系统、实时仪表盘指针），可将静态背景单独绘制到离屏Canvas，主Canvas只负责动态部分的清除与重绘。
- 创建
const offscreen = document.createElement('canvas')，尺寸同主Canvas - 首次将不变背景绘入
offscreen，主CanvasdrawImage(offscreen, 0, 0)贴图一次 - 后续只需在主Canvas上
clearRect动态区域并重绘元素，跳过背景重复绘制
警惕CSS缩放导致的清除失真
Canvas元素被CSS缩放（如transform: scale(2)）时，clearRect坐标仍按逻辑像素计算，但清除范围可能视觉偏移或模糊。
- 确保
canvas.width/canvas.height与CSS宽高一致，或按window.devicePixelRatio缩放canvas内部尺寸 - 清除前用
ctx.save()+ctx.scale()统一坐标系，清除后再restore() - 调试时临时关闭CSS缩放，确认清除位置是否准确
不复杂但容易忽略：清除前检查区域是否在Canvas可视范围内，避免无效调用；对超大Canvas，清除极窄长条区域时注意浏览器渲染管线优化边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
