Javascript 如何防止更新圆的颜色？

我想让100个不同颜色的球在画布上随机移动。现在，我有一个问题，每次我调用this.update（）进一步调用this.draw（），它也会更新c.fillStyle属性，该属性保存随机生成的颜色。因此，它会不断更新圆的颜色。 当调用方是this.update（）时，是否有任何方法可以阻止c.fillStyle被更新

var canvas=document.querySelector（'canvas'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var c=canvas.getContext（'2d'）；
var-dx=5；
var-dy=5；
函数圆（x，y，dx，dy，半径）{
这个.x=x；
这个。y=y；
this.dx=dx；
this.dy=dy；
这个半径=半径；
this.draw=函数（）{
变量i=0
c、 beginPath（）；
c、 圆弧（this.x，this.y，this.radius，0，Math.PI*2，false）；
c、 fillStyle='#'+Math.floor（Math.random（）*16777215）.toString（16）；
c、 填充（）；
}
this.update=函数（）{
如果（（this.x+this.radius）>innerWidth | |（this.x-this.radius）<0）{
this.dx=-this.dx；
}
this.x+=this.dx；
如果（（this.y+this.radius）>内部高度| |（this.y-this.radius）<0）{
this.dy=-this.dy；
}
this.y+=this.dy；
这个.draw（）；
}    
}
var循环=[]；
对于（变量i=0；i<100；i++）{
var半径=30；
var x=Math.random（）*（window.innerWidth-2*半径）+半径；
var y=Math.random（）*（window.innerHeight-2*半径）+半径；
推（新的圆（x，y，dx，dy，半径））；
}
函数animate（）{
请求动画帧（动画）；
c、 clearRect（0,0，innerWidth，innerHeight）；
对于（变量i=0；i

您可以简单地存储颜色，以便保持一致：

     this.draw = function() {
       c.beginPath();
       c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
       c.fillStyle = this.color || ( this.color = "#" + Math.floor(Math.random()*16777215).toString(16));
       c.fill();
    }

一些解释：

 this.color || (..

意味着它应该采用

this.color

，如果不存在该颜色，则应评估以下部分并采用该颜色：

 this.color = ...

---

然后存储颜色。

您可以简单地存储颜色，使其保持一致：

     this.draw = function() {
       c.beginPath();
       c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
       c.fillStyle = this.color || ( this.color = "#" + Math.floor(Math.random()*16777215).toString(16));
       c.fill();
    }

一些解释：

 this.color || (..

意味着它应该采用

this.color

，如果不存在该颜色，则应评估以下部分并采用该颜色：

 this.color = ...

---

然后存储颜色。

在实例化新圆之前，必须计算颜色，并将计算出的颜色传递给构造函数。即：

new Circle(x, y, dx, dy, radius, color);

---

在实例化新圆之前，必须计算颜色，并将计算出的颜色传递给构造函数。即：

new Circle(x, y, dx, dy, radius, color);

---

与Jonas W.的响应相同，但您可以在draw方法之外存储颜色（IMHO：它更干净）：

this.fillStyle='#'+Math.floor（Math.random（）*16777215）.toString（16）；
this.draw=函数（）{
变量i=0
c、 beginPath（）；
c、 圆弧（this.x，this.y，this.radius，0，Math.PI*2，false）；
c、 fillStyle=this.fillStyle；
c、 填充（）；
}

与Jonas W的响应相同，但您可以将颜色存储在绘图方法之外（IMHO：它更干净）：

this.fillStyle='#'+Math.floor（Math.random（）*16777215）.toString（16）；
this.draw=函数（）{
变量i=0
c、 beginPath（）；
c、 圆弧（this.x，this.y，this.radius，0，Math.PI*2，false）；
c、 fillStyle=this.fillStyle；
c、 填充（）；
}

传递一个标志，如果设置了，则不要更改。另外，请单击

并创建一个Pass a标志，如果设置了，则不要更改。另外，请单击

并创建一个