円の色が更新されないようにするにはどうすればよいですか？

Question

キャンバス上をランダムに動く異なる色の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; 
function Circle(x, y, dx, dy, radius) { 
    this.x = x; 
    this.y = y; 
    this.dx = dx; 
    this.dy = dy; 
    this.radius = radius; 
    this.draw = function() { 
     var i = 0 
     c.beginPath(); 
     c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); 
     c.fillStyle = '#' + Math.floor(Math.random()*16777215).toString(16); 
     c.fill(); 
    } 
    this.update = function() { 


      if ((this.x + this.radius) >innerWidth || (this.x - this.radius) < 0) { 
       this.dx = -this.dx; 
      } 
      this.x += this.dx; 
      if ((this.y + this.radius) >innerHeight || (this.y - this.radius) < 0) { 
       this.dy = -this.dy; 
      } 
      this.y += this.dy; 
      this.draw(); 
     }  
} 
var circles = []; 
for (var i = 0; i < 100; i++) { 
    var radius = 30; 
    var x = Math.random() * (window.innerWidth-2*radius)+radius; 
    var y = Math.random() * (window.innerHeight-2*radius)+radius; 
    circles.push(new Circle(x, y, dx, dy, radius));  
} 
function animate() { 
     requestAnimationFrame(animate); 
     c.clearRect(0,0, innerWidth,innerHeight);    
     for(var i = 0; i< circles.length;i++) 
       circles[i].update(); 
    } 
    animate(); 

Answer 1

それは一貫滞在するように、あなたは、単に、色を保存することができる：

 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 = ... 

ですから、色が保存されます。

Answer 2

新しい円をインスタンス化する前に色を計算し、計算された色をコンストラクタに渡す必要があります。 IE：ジョナスW.として

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

Answer 3

同じ応答がありますが、drawメソッドの外に色を保存することができます（私見：それはきれいです）：

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