Question

我想将此循环中创建的每个圆圈分配给它各自的颜色。现在它们都被设置为相同的颜色，尽管每个$ circle对象具有不同的颜色。我读到我需要在下一个循环之前关闭路径或填充，我很确定我做了但它仍然没有工作。我的代码如下：

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

您必须为每个fillStyle或strokeStyle操作启动新路径，因为它们与当前路径绑定，因此只需在循环内移动这些方法，以便为每个圆圈创建一个新路径，填写操作。

现在发生的是路径被清除一次，然后每次迭代添加一个新的弧。画布已清除但不是路径，并且它具有新的填充样式，因此使用上一个填充样式重新绘制路径上的所有弧。

你也在为这里不需要的每次迭代清除画布（它不是那么明显，因为路径没有被清除所以所有的圆都被重新绘制，如上所述） - 可以在绘制任何东西之前调用它虽然动画是目标。

在moveTo()之前应该调用arc()，否则它将毫无意义;因为创建了一条新路径，所以并不是真的需要它，但我把它留在了那里。

// 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

在循环中更改canvas fillStyle

1 个答案: