Changer le canvas fillStyle dans la boucle

Question

Je veux assigner chaque cercle créé dans cette boucle à sa couleur respective. Maintenant, ils ont tous la même couleur, bien que chaque objet $ circle ait une couleur différente. J'ai lu que j'ai besoin de fermer le chemin ou de remplir avant la prochaine boucle qui im ​​assez sûr que j'ai fait mais cela n'a pas encore fonctionné. Mon code est ci-dessous:

drawCircles: function() { 
       this.ctx.beginPath(); 
       for(var i = 0; i < this.circles.length; i++){ 
        var $circle = this.circles[i]; 
        this.ctx.fillStyle = $circle.color; //blue 

        var tx = $circle.destX - $circle.x, 
         ty = $circle.destY - $circle.y, 
         dist = Math.sqrt(tx*tx+ty*ty); 

        if(tx > 0){ 
         $circle.x += (tx/dist) * ($circle.speed > 0 ? $circle.speed -= 0.005 : $circle.speed += .2); 
         $circle.y += (ty/dist) * ($circle.speed > 0 ? $circle.speed -= 0.005 : $circle.speed += .2); 
        } 

        this.ctx.arc($circle.x,$circle.y,$circle.size,0,Math.PI*2); 


        this.ctx.clearRect(0,0,this.ctx.canvas.width, this.ctx.canvas.height); 
        this.ctx.moveTo($circle.x + $circle.size, $circle.y); // so simply add 'rad' to the centerX 
       } 
       this.ctx.closePath(); 
       this.ctx.fill(); 
      } 

Answer 1

Vous devez commencer nouveau chemin pour chaque fillStyle ou strokeStyle opération car ils sont liés au chemin courant, donc simplement déplacer ces méthodes à l'intérieur de la boucle donc un nouveau chemin est créé pour chaque cercle et remplir l'opération. Ce qui se passe maintenant, c'est que le chemin est effacé une fois, puis un nouvel arc est ajouté à chaque itération. Le canevas est effacé mais pas le chemin, et il a un nouveau style de remplissage afin que tous les arcs du chemin soient redessinés en utilisant le dernier style de remplissage. Vous effacez également le canevas pour chaque itération qui n'est pas nécessaire ici (ce n'est pas si évident puisque le chemin n'est pas effacé, tous les cercles sont redessinés comme indiqué ci-dessus) - il peut être appelé avant que quelque chose soit dessiné si animation est le but.

Et moveTo() devrait être appelé avant arc(), ou ce serait inutile; Depuis qu'un nouveau chemin est créé, ce n'est pas vraiment nécessaire mais je l'ai laissé là.

// clearRect moved out of loop: 
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); 

//this.ctx.beginPath(); // move inside loop 
for (var i = 0; i < this.circles.length; i++) { 
    this.ctx.beginPath(); // here 

    var $circle = this.circles[i]; 
    this.ctx.fillStyle = $circle.color; //blue 

    var tx = $circle.destX - $circle.x, 
     ty = $circle.destY - $circle.y, 
     dist = Math.sqrt(tx * tx + ty * ty); 

    if (tx > 0) { 
    $circle.x += (tx/dist)*($circle.speed>0 ? $circle.speed-=0.005 : $circle.speed += .2); 
    $circle.y += (ty/dist)*($circle.speed>0 ? $circle.speed-=0.005 : $circle.speed += .2); 
    } 

    // use moveTo OP before adding the arc() 
    this.ctx.moveTo($circle.x + $circle.size, $circle.y); 
    this.ctx.arc($circle.x, $circle.y, $circle.size, 0, Math.PI * 2); 

    this.ctx.fill();  // here 
} 
//this.ctx.closePath(); // not needed for fill 
//this.ctx.fill();  // move inside loop