javascript - 如何给每个圆圈一个随机的颜色？

Question

我不知道如何给所有不同的圆圈随机颜色。现在我的代码为所有圆圈赋予了相同的颜色，但它会在您刷新时切换。

我想让它给所有的圆圈不同的颜色。我尝试了两种方法，但它们似乎都不起作用。

这是我的代码

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

Answer 1

将颜色传递给Circle构造函数，并在update函数中设置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>