Canvas背景无法清除圆形轨迹问题及重力实现技术咨询

一、为什么无法清除上一次绘制的圆形？ #

你的问题核心在于Canvas路径没有重置，导致每次绘制都会累积之前的路径，最终所有历史圆形都会被重新描边，看起来就像旧的圆形没被清除。具体来说：

• 在Meteor.draw()方法中，你调用ctx.arc()创建圆形路径，但没有先调用ctx.beginPath()来开启新路径。Canvas的绘图上下文会保留之前的路径记录，每次执行stroke()时，都会把所有累积的路径重新画一遍。
• 虽然你用fillRect()填充了背景，但如果路径没重置，新的stroke()还是会把旧路径也渲染出来，导致旧圆形“残留”。

修复代码： #

修改Meteor类的draw()方法，添加beginPath()来重置路径：

draw(){
  ctx.beginPath(); // 开启新路径，清除之前的路径记录
  ctx.fillStyle = this.color;
  ctx.arc(this.xPos, this.yPos, this.radius, 0, 2 * Math.PI);
  // ctx.fill();
  ctx.stroke();
}

另外，你当前的fillRect()用了随机背景色，虽然不影响清除逻辑，但如果想要固定背景（避免每次刷新颜色跳变），可以把ctx.fillStyle的设置移到setup()或者draw()开头设为固定值，比如ctx.fillStyle = "#f0f0f0"。

二、实现重力效果的建议 #

你的代码里已经定义了acceleration（加速度），但没有正确应用到速度更新上。重力的本质是持续给物体增加向下的加速度，所以需要在fall()方法中不断更新垂直方向的速度，再用更新后的速度计算新位置：

修改fall()方法： #

fall(){
  this.ySpeed += this.acceleration; // 每帧给y方向速度加上重力加速度
  this.yPos += this.ySpeed; // 用更新后的速度计算新位置

  // 可选：添加地面碰撞检测，避免小球无限下落
  if(this.yPos + this.radius > c.height){
    this.yPos = c.height - this.radius; // 让小球刚好接触地面
    this.ySpeed *= -0.8; // 碰撞反弹，乘以0.8模拟能量损失（可选）
  }
}

这样修改后，小球会从初始速度开始，逐渐加速下落，完全符合真实的重力效果。如果需要更细腻的物理表现，还可以添加空气阻力（比如给速度乘以一个小于1的系数，如this.ySpeed *= 0.99），但基础的重力实现用上面的代码就足够了。

完整修复后的代码（整合以上修改）： #

let c, ctx;
let met;
let colorArray = ["green", "yellow", "orange", "red"];

window.onload = function(){
  c = document.getElementById("boom");
  ctx = c.getContext("2d");
  c.width = window.innerWidth - 165;
  c.height = window.innerHeight;
  setup();
  draw();
}

function setup(){
  met = new Meteor(200, 100, 10, 0, 0); // 初始ySpeed设为0，让小球从静止开始下落
}

function draw(){
  window.requestAnimationFrame(draw);
  // 固定背景色，避免随机跳变
  ctx.fillStyle = "#f0f0f0";
  ctx.fillRect(0, 0, c.width, c.height);
  met.draw();
  met.fall();
};

class Meteor {
  constructor(x, y, r, xSpeed, ySpeed){
    this.xPos = x;
    this.yPos = y;
    this.radius = r;
    this.xSpeed = xSpeed;
    this.ySpeed = ySpeed;
    this.color = "blue";
    this.acceleration = 0.5;
  }

  draw(){
    ctx.beginPath(); // 关键：开启新路径
    ctx.fillStyle = this.color;
    ctx.arc(this.xPos, this.yPos, this.radius, 0, 2 * Math.PI);
    // ctx.fill();
    ctx.stroke();
  }

  fall(){
    this.ySpeed += this.acceleration;
    this.yPos += this.ySpeed;

    // 地面碰撞处理
    if(this.yPos + this.radius > c.height){
      this.yPos = c.height - this.radius;
      this.ySpeed *= -0.8;
    }
  }
}

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