clearRect仅清像素不重置状态，需手动恢复globalCompositeOperation等；resetCanvas通过重设width彻底重置但性能差；fillRect仅适用于单色背景。
clearRect 能清空，但别漏掉 save/restore 带来的状态残留
clearRect 是最直接的清空方式，它只擦除指定矩形区域的像素，不重置任何绘图状态。如果你之前调用了 save()、设置了 globalAlpha、strokeStyle 或 transform，这些状态依然存在——下次绘图可能颜色变淡、线条偏移、甚至被缩放。
- 始终用
ctx.clearRect(0, 0, canvas.width, canvas.height)，别用canvas.width和canvas.height以外的尺寸，否则留白或截断 - 如果画布有 CSS 缩放（比如
style="width: 400px; height: 300px;"），要确保canvas.width和canvas.height是实际像素尺寸，否则clearRect会清不全 - 清空前不需要
beginPath()，clearRect不受路径影响
resetCanvas 方法本质是重设 width 属性，慎用于动画场景
给 canvas.width 赋值（哪怕赋成当前值）会**强制清空并重置所有上下文状态**：路径、变换、样式、裁剪区域全归零。这是唯一能真正“重置”的方法，但它会触发 canvas 内存重建。
- 适用于初始化或彻底重绘前，比如切换绘图模式、加载新内容
- 在 requestAnimationFrame 循环里频繁执行
canvas.width = canvas.width会导致明显卡顿，因为浏览器要分配新位图、丢弃旧纹理 - 如果 canvas 绑定了
webgl上下文，重设width会让 WebGL 上下文失效，需重新初始化
function resetCanvas(canvas) {
const w = canvas.width;
const h = canvas.height;
canvas.width = w; // 触发重置
canvas.height = h;
}
fillRect 配合背景色也能“清空”，但仅限单色背景需求
用 fillRect 填充整个画布，在视觉上等效于清空，但它依赖你设置的 fillStyle。如果原画布有透明区域或叠加效果，这个方法反而会掩盖问题。
- 适合固定背景色场景，比如白板应用默认底色为
#fff - 必须在
fillRect前设置ctx.fillStyle，否则按默认黑色填充 - 不会重置绘图状态，
globalCompositeOperation若设为"destination-out"，fillRect可能变成擦除而非覆盖
ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, canvas.width, canvas.height);
清空后记得重置 globalCompositeOperation 等关键状态
很多清除失败其实不是清不干净，而是后续绘图用了错误的合成模式。比如之前设了 ctx.globalCompositeOperation = "destination-out"，之后没改回来，再画线就会把已有内容“挖掉”而不是覆盖。
立即学习“前端免费学习笔记（深入）”；
- 常见需手动恢复的状态包括：
globalCompositeOperation（默认"source-over"）、globalAlpha（默认1.0）、lineWidth（默认1.0） - 如果使用了
clip()，清空后裁剪路径仍生效，新内容会被裁剪——必须调用ctx.resetClip()（Chrome/Firefox 支持）或先save()再restore() - 没有万能 reset 函数；是否重置状态，取决于你下一次绘图的语义需求
