JavaScript Canvas重绘时三角形未消失的问题求解

嘿，这个问题我做Canvas小游戏时也踩过坑！核心原因是Canvas的绘制是叠加式的——你每次调用draw方法都是在原有画面上再叠一层，旧的三角形自然不会自动消失。给你几个实用的解决办法：

方法1：每帧绘制前清空整个画布 #

这是最通用、最简单的方案，适合大多数小游戏场景。在你的游戏主循环里，先调用clearRect清空整个画布，再绘制新的内容：

// 假设你的游戏主循环结构是这样的
function gameLoop() {
  // 第一步：清空整个画布（x起点、y起点、宽度、高度）
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 第二步：绘制你的三角形实例
  myTriangle.draw(ctx);
  
  // 持续循环
  requestAnimationFrame(gameLoop);
}

clearRect会直接擦除指定区域内的所有像素，用画布的宽高就能确保整个画面被清空。

方法2：用背景色覆盖画布 #

如果你的游戏有固定背景色，也可以用填充矩形的方式覆盖旧画面，效果和清空一致，但更直观：

function gameLoop() {
  // 设置背景色（比如白色）并填充整个画布
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // 绘制三角形
  myTriangle.draw(ctx);
  
  requestAnimationFrame(gameLoop);
}

这个方法适合需要保留统一背景的场景，比如你的游戏有静态背景图的话，也可以在这里重新绘制背景图。

方法3：仅清除三角形的旧位置（性能优化） #

如果你的三角形是移动的，且不想清空整个画布（比如有其他静态元素），可以记录三角形上一次的位置，每次绘制前只清除那个区域：

class Triangle {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
    // 记录上一次的位置，初始和当前位置一致
    this.lastX = x;
    this.lastY = y;
  }
  
  draw(ctx) {
    // 先清除上一次绘制的三角形区域（根据三角形的尺寸计算边界）
    ctx.clearRect(
      this.lastX - this.size/2,
      this.lastY - this.size/2,
      this.size,
      this.size
    );
    
    // 绘制新的三角形
    ctx.fillStyle = '#ff0000';
    ctx.beginPath();
    ctx.moveTo(this.x, this.y - this.size/2);
    ctx.lineTo(this.x + this.size/2, this.y + this.size/2);
    ctx.lineTo(this.x - this.size/2, this.y + this.size/2);
    ctx.closePath();
    ctx.fill();
    
    // 更新上一次的位置为当前位置
    this.lastX = this.x;
    this.lastY = this.y;
  }
}

这个方案能减少画布的清空区域，适合性能要求较高的场景，但需要额外维护元素的位置状态。

重要注意事项 #

• 清空操作一定要放在绘制新内容之前，不然刚画的元素会被立刻擦除。
• 如果你的Canvas使用了变换（比如ctx.scale、ctx.translate），要注意clearRect的坐标是基于当前变换后的坐标系的。必要时可以先调用ctx.save()保存状态，清空后再用ctx.restore()恢复。
• 用requestAnimationFrame驱动动画时，确保每帧都执行清空步骤——这是新手最容易忽略的点！

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