Canvas中clearRect无法清除内容问题求助

我之前也踩过clearRect失效的坑，那种看着画面一直叠加、怎么清都清不掉的感觉真的很闹心！结合你的代码片段和常见的Canvas动画坑，给你几个针对性的排查方向：

1. 一定要把clearRect放在每帧绘制的最开头 #

这是最容易犯的错误——如果先绘制内容再执行清除操作，你看到的永远是绘制后的画面，等于白清了。正确的执行顺序必须是先清画布再绘制：

function animate() {
  // 第一步：清除整个画布，参数对应x起点、y起点、宽度、高度
  ctx.clearRect(0, 0, canvas2.width, canvas2.height);
  
  // 第二步：执行你的螺旋绘制逻辑
  // 比如绘制路径、设置样式、stroke/fill等操作...
  
  requestAnimationFrame(animate);
}

2. 检查画布宽高的设置逻辑 #

你代码里用了scrollWidth来设置画布尺寸，这里有两个潜在问题：

• 如果你的canvas元素用CSS设置了宽高，scrollWidth可能不等于实际需要的绘制尺寸，建议换成offsetWidth/offsetHeight（对应元素的布局宽高），或者根据容器/窗口尺寸直接赋值。
• 绝对不要在动画循环里重复设置canvas的宽高——每次修改宽高都会自动清空画布，还会重置上下文的所有状态（比如颜色、变换矩阵），反而会导致绘制异常。宽高设置应该只在初始化时执行一次：

function spirals() {
  const canvas2 = document.getElementById('mycanvas');
  // 初始化时一次性设置画布尺寸
  canvas2.width = canvas2.offsetWidth;
  canvas2.height = canvas2.offsetHeight;
  const ctx = canvas2.getContext('2d');
  
  function animate() {
    ctx.clearRect(0, 0, canvas2.width, canvas2.height);
    // 绘制螺旋的代码...
    requestAnimationFrame(animate);
  }
  animate();
}

3. 检查上下文的坐标系是否被修改 #

如果你在绘制螺旋时用了translate()、rotate()这类变换方法，但没有用save()和restore()来恢复初始状态，那么clearRect的坐标系会被改变——比如你把原点移到了画布中心，再调用clearRect(0,0,width,height)就会从中心开始清除，而不是整个画布。解决方法是：

function animate() {
  ctx.clearRect(0, 0, canvas2.width, canvas2.height);
  
  ctx.save(); // 保存上下文的初始状态
  // 执行平移、旋转等变换操作
  ctx.translate(canvas2.width/2, canvas2.height/2);
  // 绘制螺旋的代码...
  ctx.restore(); // 恢复到初始状态，避免影响下一次绘制
  
  requestAnimationFrame(animate);
}

4. 确认上下文对象的唯一性 #

如果你的代码里多次调用canvas2.getContext('2d')，虽然不会报错，但最好在初始化时只获取一次并保存到变量里，避免不必要的性能损耗和潜在的上下文状态冲突。

如果以上方法都没解决问题，建议把完整的绘制代码贴出来，这样能更精准地定位问题！

内容的提问来源于stack exchange，提问作者Uberche