在画布上创建多个对象

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>

当前代码：在画布顶部的随机位置绘制一个圆圈，然后圆圈将向画布底部下降。 我想要代码：绘制许多这些圆圈而不必编码数百行变量。

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);
}

我还将球的Y起始位置随机化，因为我认为这是你正在寻找的。

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

＆＃13;

＆＃13;

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);
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;