在画布上创建多个对象

Question

我的代码创建了一个圆形，它会掉落到画布底部并反弹。问题是我需要创建多个这样的圆形。我该怎么做？

var canvas = document.getElementById('mcanvas');
var raf;


function rainDrop() {
  this.x = Math.random() * (canvas.width - (canvas.width - canvas.width)) + (canvas.width - canvas.width);
  this.y = 0;
  this.vx = -0.5;
  this.vy = 1;
  this.radius = 1;
  this.color = 'blue';
  this.gravity = 2;
  this.gravitySpeed = 0;
  this.bounce = 1;
  this.ctx = canvas.getContext('2d');
  this.draw = function() {
    this.ctx.beginPath();
    this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    this.ctx.closePath();
    this.ctx.fillStyle = this.color;
    this.ctx.fill();
  }
  this.newPos = function() {
    this.gravitySpeed += this.gravity;
    this.x += this.vx;
    this.y += this.vy + this.gravitySpeed;
    this.hitBottom();
  }
  this.hitBottom = function() {
    var rockbottom = canvas.height - this.radius;
    if (this.y > rockbottom) {
      this.y = rockbottom;
      this.gravitySpeed = -(this.gravitySpeed / 1.5 * this.bounce);
    }
  }
}



var ball = new rainDrop();


function drawf() {
  ball.ctx.clearRect(0, 0, canvas.width, canvas.height);
  ball.draw();
  ball.newPos();
  raf = window.requestAnimationFrame(drawf);
}

canvas.addEventListener('mouseover', function(e) {
  raf = window.requestAnimationFrame(drawf);
});

ball.draw();

<canvas id="mcanvas" width="200" height="100"></canvas>

当前代码：在画布的顶部随机位置绘制一个圆形，然后圆形将向画布底部下降。

我希望代码能够：绘制多个这样的圆形，而无需编写数百行变量。

- Tadreik

---

不要在每次绘制雨滴时清除画布上下文。因此，首先将 ball.ctx.clearRect(0,0, canvas.width, canvas.height); 放入一个单独的函数中，只有在您想要删除所有内容时才调用该函数。 - Shilly

清空画布，绘制所有的雨滴，循环。 - Reinstate Monica Cellio

Answer 1

也许有更好的方法，但我使用了一个球的数组并添加了一个forEach。

用150个球填充一个新的球数组

var balls = [];

for(var i=0; i<150; i++)
{
    balls[i] = new rainDrop();
}

在drawf函数中循环球以绘制它们。

function drawf() {
    balls[0].ctx.clearRect(0,0, canvas.width, canvas.height);
    balls.forEach(function(b) {
        b.draw();
        b.newPos();});
        raf = window.requestAnimationFrame(drawf);
}

我还随机化了球的起始位置，因为我认为这正是你要找的。

 this.y = Math.random() * (canvas.height - (canvas.height-canvas.height)) + (canvas.height-canvas.height);

var canvas = document.getElementById('mcanvas');
var raf;


function rainDrop() {
  this.x = Math.random() * (canvas.width - (canvas.width-canvas.width)) + (canvas.width-canvas.width);
  this.y = Math.random() * (canvas.height - (canvas.height-canvas.height)) + (canvas.height-canvas.height);
  this.vx = -0.5;
  this.vy = 1;
  this.radius = 1;
  this.color = 'blue';
  this.gravity = 2;
  this.gravitySpeed = 0;
  this.bounce = 1;
  this.ctx = canvas.getContext('2d');
  this.draw = function() {
    this.ctx.beginPath();
    this.ctx.arc(this.x,this.y,this.radius,0,Math.PI * 2, true);
    this.ctx.closePath();
    this.ctx.fillStyle = this.color;
    this.ctx.fill();
  }
  this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.x += this.vx;
        this.y += this.vy + this.gravitySpeed;
        this.hitBottom();
    }
  this.hitBottom = function() {
    var rockbottom = canvas.height - this.radius;
    if (this.y > rockbottom) {
      this.y = rockbottom;
      this.gravitySpeed = -(this.gravitySpeed/1.5 * this.bounce);
    }
  }
}


var balls = [];

for(var i=0; i<150; i++)
{
 balls[i] = new rainDrop();
}


function drawf() {
  balls[0].ctx.clearRect(0,0, canvas.width, canvas.height);
  balls.forEach(function(b) {
        b.draw();
        b.newPos();});

  raf = window.requestAnimationFrame(drawf);
}

canvas.addEventListener('mouseover', function(e) {
  raf = window.requestAnimationFrame(drawf);
});

<canvas id="mcanvas" style="border:1px solid gray; width:200px; height:100px;"/>

- Dale

---

这看起来有点疯狂。 - AGrush