如何清除JavaScript中arc绘制的圆形？Canvas粒子残留问题求助

首先，你的核心问题是canvas尺寸初始化时机错误，导致clearRect无法正确清除整个画布。另外我也会帮你实现粒子下落效果，同时保持透明背景、不依赖图片来降低服务器负载。

问题分析 #

你在全局作用域直接设置canvas.width和canvas.height，但此时DOM可能还未加载完成，document.getElementById("canvas")可能返回null，导致画布尺寸没有被正确设置。这时候clearRect(0, 0, canvas.width, canvas.height)实际上是在清除一个宽高为0的区域，自然无法清除之前绘制的粒子，所以会留下轨迹。

另外，你的粒子目前只有水平移动，没有实现下落（y轴位置更新），这也需要调整。

解决方案 #

1. 将画布尺寸初始化放到DOM加载完成的回调中，确保canvas元素已经存在后再设置宽高。
2. 更新粒子的tick方法，增加y轴的下落速度，实现粒子下落效果。
3. 保持透明背景：canvas默认就是透明的，只要不设置fillStyle填充整个画布，就能保持透明，无需额外操作。
4. 移除不必要的closePath：fill()方法会自动闭合路径，closePath在这里不是必须的。

修改后的完整代码 #

document.addEventListener("DOMContentLoaded", function() {
  const canvas = document.getElementById("canvas");
  // 确保DOM加载完成后再设置画布尺寸
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const ctx = canvas.getContext("2d");

  const ParticleFactory = function(){
    this.interval = 100;
    this.lastOutput = Date.now();
    this.particles = [];
  }

  ParticleFactory.prototype.tick = function(){
    if (Date.now() > this.lastOutput + this.interval) {
      // 随机生成x轴位置，让粒子从顶部随机位置下落
      const x = Math.random() * canvas.width;
      const particle = new Particle(x, 0, 4);
      this.particles.push(particle);
      this.lastOutput = Date.now();
    }
    // 遍历粒子更新状态，同时移除超出画布的粒子节省性能
    for (let i = this.particles.length - 1; i >= 0; i--) {
      const particle = this.particles[i];
      particle.tick();
      // 粒子超出画布底部时移除
      if (particle.y > canvas.height + particle.r) {
        this.particles.splice(i, 1);
      }
    };
  }

  ParticleFactory.prototype.draw = function(){
    for (const particle of this.particles) {
      particle.draw();
    };
  }

  const Particle = function(x, y, r){
    this.x = x;
    this.y = y;
    this.r = r;
    // 给每个粒子随机下落速度，增加自然感
    this.speedY = Math.random() * 2 + 1;
    // 可选：增加水平随机漂移
    this.speedX = (Math.random() - 0.5) * 0.5;
  }

  Particle.prototype.tick = function(){
    this.y += this.speedY;
    this.x += this.speedX;
  }

  Particle.prototype.draw = function(){
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
    ctx.fillStyle = "rgb(0, 0, 255)";
    ctx.fill();
  }

  // Definitions
  let particleFactory = new ParticleFactory;

  function draw(){
    // 清除整个画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    particleFactory.draw();
  }

  function tick(){
    particleFactory.tick();
    draw();
    window.requestAnimationFrame(tick)
  }

  tick();

  // 可选：窗口大小改变时重新设置画布尺寸
  window.addEventListener("resize", function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  });
});

额外优化点 #

• 增加了粒子超出画布后的移除逻辑，避免粒子数组无限增长导致性能下降。
• 给粒子添加了随机下落速度和水平漂移，让效果更自然。
• 添加了窗口 resize 事件监听，确保画布尺寸始终适配窗口。

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