Javascript 如何给每个圆一个随机的颜色？

我想不出如何给所有不同的圆圈一个随机的颜色。现在，我的代码为所有的圆提供了相同的颜色，但是当你刷新时它会切换

我想让它给所有的圆圈不同的颜色。我试过两种方法，但似乎都不管用

这是我的密码

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

var can=document.getElementById（'canvas'）；
can.width=window.innerWidth；
can.height=window.innerHeight；
var ctx=can.getContext（'2d'）；
功能圆（centerX、centerY、speedX、speedX、半径）{
this.centerX=centerX；
this.centerY=centerY；
this.speedX=speedX；
这个。迅速的=迅速的；
这个半径=半径；
this.draw=函数（）{
ctx.beginPath（）；
ctx.arc（this.centerX，this.centerY，this.radius，0，Math.PI*2）；
ctx.fill（）；
}
this.update=函数（）{
this.ctx.fillStyle=
this.centerX+=this.speedX；
如果（this.centerX+this.radius>innerWidth | | this.centerX-this.radius<0）{
this.speedX=-this.speedX；
}
this.centerY+=this.speedY；
如果（this.centerY+this.radius>innerHeight | | this.centerY-this.radius<0）{
this.speedY=-this.speedY；
}
这个.draw（）；
}
}
var circleArray=[]；
var-circleAmount=45；
对于（变量i=0；i

将颜色传递给

循环

构造函数，并在更新函数中设置

填充颜色

：

var can=document.getElementById（'canvas'）；
can.width=window.innerWidth；
can.height=window.innerHeight；
var ctx=can.getContext（'2d'）；
功能圆（centerX、centerY、speedX、speedX、半径、颜色）{
this.centerX=centerX；
this.centerY=centerY；
this.speedX=speedX；
这个。迅速的=迅速的；
这个半径=半径；
这个颜色=颜色；
this.draw=函数（）{
ctx.beginPath（）；
ctx.fillStyle=this.color；
ctx.arc（this.centerX，this.centerY，this.radius，0，Math.PI*2）；
ctx.fill（）；
}
this.update=函数（）{
this.centerX+=this.speedX；
如果（this.centerX+this.radius>innerWidth | | this.centerX-this.radius<0）{
this.speedX=-this.speedX；
}
this.centerY+=this.speedY；
如果（this.centerY+this.radius>innerHeight | | this.centerY-this.radius<0）{
this.speedY=-this.speedY；
}
这个.draw（）；
}
}
var circleArray=[]；
var-circleAmount=45；
对于（变量i=0；i
向圆实例添加颜色属性。然后将生成的随机颜色传递到新圆（）的创建中。现在，您每次迭代都会为ctx.fillStyle生成一个新颜色，但是设置是全局的谢谢，我在执行此操作时忘了添加“ctx.fillStyle=this.color；”，这就是它不起作用的原因。谢谢