如何用JavaScript和Canvas通过循环实例化并渲染20个Ball对象

先纠正你现有代码里的两个核心问题：

• 你在draw()里每次执行都重复往balls数组塞同一个ball1和ball2，会导致数组无限膨胀，很快拖慢性能
• 手动指定索引渲染的方式完全没法扩展到20个球的需求

直接按下面的方式修改，就能实现生成20个球并批量渲染的效果：

修改后的完整代码 #

let balls = [];

function setup() {
  createCanvas(800, 600);
  // 循环20次，批量生成Ball实例并存入数组
  for (let i = 0; i < 20; i++) {
    balls.push(new Ball());
  }
} 

function drawBackground() {
  background(80);
}

function draw() {
  drawBackground(); 
  // 遍历数组，统一渲染所有Ball
  balls.forEach(ball => ball.render());
}

class Ball{
  constructor(){
    this.size = random(25,75);
    // 颜色参数
    this.r = random(0,255);
    this.g = random(0,255);
    this.b = random(0,255);

    // 初始位置
    this.xpos = random(20,780);
    this.ypos = random(20,580);
  }

  render(){
    fill(this.r,this.g,this.b);
    ellipse(this.xpos, this.ypos, this.size,this.size);
  }
}

关键改动说明 #

1. 删掉冗余变量：移除了ball1、ball2这类手动创建的单个球变量，直接通过循环批量生成
2. 在setup里一次性生成所有球：setup()只会在程序启动时执行一次，在这里用for循环跑20次，每次创建新的Ball实例并加入数组，避免重复创建
3. 遍历数组批量渲染：在draw()里用forEach遍历balls数组，对每个球调用render()方法，不管数组里有多少球都能统一处理

运行后就能看到20个随机颜色、大小、位置的球稳定显示在画布上了。

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