Как породить в переменное время несколько кругов - PullRequest
Новая
       16

Как породить в переменное время несколько кругов

0 голосов
/ 17 мая 2019

Я пытаюсь создать несколько кругов во время «появления», но я не знаю, как это сделать.Я уже создал переменную и метод увеличения цикла, но я не знаю, как это сделать.Я новичок в холст-анимации. 

var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext('2d');

 function Meteor(x, y, dx, dy, radius, spawn) {
   this.x = x;
   this.y = y;
   this.dx = dx;
   this.dy = dy;
   this.radius = radius;
   this.spawn = spawn;


   this.draw = function() {
     c.beginPath();
     c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
     c.strokeStyle = "blue";
     c.stroke();
   }

   this.update = function () {
       this.x += 1;
       this.y += 1;
       this.spawn = spawn;

   this.draw();
   }
 }

 var meteorArray = [];

 for (var i = 0; i < 25; i++) {
   var x = Math.random() * innerWidth -300;
   var y = -30;
   var dx = (Math.random() - 0.5) * 8;
   var dy = (Math.random() - 0.5) * 8;
   var radius = Math.random() * 35;
   var spawn = 500+Math.random()*1000;
   var meteor = new Meteor( 300, 500, 3, 5, 45);
   meteorArray.push(new Meteor(x, y, dx, dy, radius, spawn));
 }

function animate() {
  requestAnimationFrame(animate);
  c.clearRect(0, 0, innerWidth, innerHeight);

  for (var i = 0; i < meteorArray.length; i++) {
    meteorArray[i].update();
  }
}

animate();
...