Я не могу понять, как придать всем разным кругам случайный цвет. Прямо сейчас мой код дает всем кружкам одинаковый цвет, но он переключается при обновлении.

Я хочу, чтобы все круги были разными. Я пробовал два способа, но они не работают.

Вот мой код

var can = document.getElementById('canvas');
can.width = window.innerWidth;
can.height = window.innerHeight;

var ctx = can.getContext('2d');

function Circle(centerX, centerY, speedX, speedX, radius) {
  this.centerX = centerX;
  this.centerY = centerY;
  this.speedX = speedX;
  this.speedY = speedY;
  this.radius = radius;

  this.draw = function () {
    ctx.beginPath();
    ctx.arc(this.centerX, this.centerY, this.radius, 0, Math.PI * 2);
    ctx.fill();
  }

  this.update = function () {
    this.ctx.fillStyle = 
    this.centerX += this.speedX;
    if (this.centerX + this.radius > innerWidth || this.centerX - this.radius < 0) {
      this.speedX = -this.speedX;
    }

    this.centerY += this.speedY;
    if (this.centerY + this.radius > innerHeight || this.centerY - this.radius < 0) {
      this.speedY = -this.speedY;
    }
    this.draw();
  }
}

var circleArray = [];
var circleAmount = 45;

for (var i = 0; i < circleAmount; i++) {
  var centerX = Math.random() * window.innerWidth;
  var centerY = Math.random() * window.innerWidth;
  var radius = (Math.random() * 24) + 3;
  ctx.fillStyle = 'rgba(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + ".5" + ')';     
  var speedY = (Math.random() - 0.5) * 3;
  var speedX = (Math.random() - 0.5) * 6;
  circleArray.push(new Circle(centerX, centerY, speedX, speedY, radius));
}

function draw() {
  requestAnimationFrame(draw);
  ctx.clearRect(0, 0, innerWidth, innerHeight);

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

draw();
2
MarcoPolo

1 ответ

Передайте цвет в функцию конструктора Circle и установите fillColor в функции обновления:

var can = document.getElementById('canvas');
can.width = window.innerWidth;
can.height = window.innerHeight;

var ctx = can.getContext('2d');

function Circle(centerX, centerY, speedX, speedX, radius, color) {
  this.centerX = centerX;
  this.centerY = centerY;
  this.speedX = speedX;
  this.speedY = speedY;
  this.radius = radius;
  this.color = color;

  this.draw = function() {
    ctx.beginPath();
    ctx.fillStyle = this.color;
    ctx.arc(this.centerX, this.centerY, this.radius, 0, Math.PI * 2);
    ctx.fill();
  }

  this.update = function() {
    this.centerX += this.speedX;
    if (this.centerX + this.radius > innerWidth || this.centerX - this.radius < 0) {
      this.speedX = -this.speedX;
    }

    this.centerY += this.speedY;
    if (this.centerY + this.radius > innerHeight || this.centerY - this.radius < 0) {
      this.speedY = -this.speedY;
    }
    this.draw();
  }
}

var circleArray = [];
var circleAmount = 45;

for (var i = 0; i < circleAmount; i++) {
  var centerX = Math.random() * window.innerWidth;
  var centerY = Math.random() * window.innerWidth;
  var radius = (Math.random() * 24) + 3;
  var color = 'rgba(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + ".5" + ')';

  var speedY = (Math.random() - 0.5) * 3;
  var speedX = (Math.random() - 0.5) * 6;
  circleArray.push(new Circle(centerX, centerY, speedX, speedY, radius, color));

}


function draw() {
  requestAnimationFrame(draw);

  ctx.clearRect(0, 0, innerWidth, innerHeight);

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


}

draw();
<canvas id="canvas"></canvas>
58583904