如何用JavaScript Canvas实现AimBooster的圆形逐次生成及动态生长效果

原代码核心问题 #

• 全局共用inc缩放状态：所有圆形共享同一个缩放标记，只要有一个圆形半径达到30，所有后续圆形都会直接进入缩小逻辑，无法正常生长
• 仅渲染最新圆形：每次清屏后只绘制最新生成的单个圆形，历史生成的圆形没有被重绘，看起来生成后立刻消失
• 生成频率不符合要求：原定时器每50ms就新增一个圆形，远高于需求的数秒生成一个的要求
• 缺少无效资源清理逻辑：生命周期结束的圆形没有被移除，会持续占用内存

修复后的JS代码 #

替换原有js文件的全部内容即可：

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// canvas 有效绘制区域边界
var max_x = 610,
  min_x = 30,
  min_y = 30,
  max_y = 466;

let balls = [];

// 圆形类
class Ball {
  constructor() {
    // 限制圆形生成在有效区域内
    this.x = min_x + Math.random() * (max_x - min_x);
    this.y = min_y + Math.random() * (max_y - min_y);
    this.r = 1;
    this.speed = 1;
    this.ball_life = 0;
    // 每个圆形独立控制缩放状态，互不干扰
    this.inc = true;
  }
  draw() {
    context.beginPath();
    context.arc(this.x, this.y, this.r, 0, Math.PI * 2);
    context.fillStyle = "orange";
    context.fill();
    context.stroke();
  }

  grow() {
    this.inc ? this.r += this.speed : this.r -= this.speed;
    this.ball_life += 1;
  }

  rad_check() {
    if (this.r >= 30) this.inc = false;
    // 半径小于等于0标记为可移除
    if (this.r <= 0) this.canRemove = true;
  }
}

// 新增圆形函数
function creatballs() {
  balls.push(new Ball());
}

// 动画渲染定时器，每50ms刷新一次画面
setInterval(() => {
  context.clearRect(0, 0, canvas.width, canvas.height);
  // 过滤掉已结束生命周期的圆形，剩余圆形依次更新状态并绘制
  balls = balls.filter(ball => {
    ball.rad_check();
    if (ball.canRemove) return false;
    ball.grow();
    ball.draw();
    return true;
  })
}, 50);

// 新圆形生成定时器，间隔3000ms=3秒生成一个，可自行调整数值修改间隔
setInterval(() => {
  creatballs();
}, 3000);

效果验证 #

修改后运行代码即可实现需求：每间隔指定时长生成一个新的橙色圆形，每个圆形独立完成从小到大再缩小到消失的动画，多个圆形可同时存在于画布中正常展示。

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