为什么即使填充设置为'rgba（0,0,0,0）'，最近绘制的弧也有黑色填充？

Question

我正在尝试添加一个带有 40 像素边框（笔触）且没有背景（填充）的圆圈

我已经让它工作了 - 它只是最近绘制的圆圈，它的填充为黑色，即使我将它（和所有其他）设置为 'rbg(0,0,0,0)'

  public animate(milliseconds: any) {
    const elapsed = milliseconds - this.Configs.lastStep;
    this.Configs.lastStep = milliseconds;
    if (this.canvas) {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
    this.update(elapsed);
    this.ctx.fill();
    window.requestAnimationFrame(this.animate.bind(this));
  }

  public draw(milliseconds: number) {
    const colors = ["#270f36", "#632b6c", "#c76b98", "#f09f9c", "#fcc3a3"];

    this.ctx.save();
    for (let ring of this.rings) {
      this.ctx.beginPath();
      this.ctx.fillStyle = "rgba(255, 255, 255, 0)";
      this.ctx.strokeStyle = randomItemFromArray(colors);
      this.ctx.arc(ring.getOrigin.x, ring.getOrigin.y, ring.getRadius, 0, Math.PI * 2, false);
      this.ctx.lineWidth = 10;
      this.ctx.fill();
      this.ctx.stroke();
    }
   this.ctx.restore();
  }
  public update(elapsed: number) {
        this.draw(elapsed);
}

我希望所有的环都是透明的 - 但添加到环阵列的最后一个总是填充黑色。

我很难过 - 任何想法都将不胜感激。

Here is an example of what I am talking about

Answer 1

您在animate 函数中调用ctx.fill()。此时，您将restore() 上下文的属性设置为调用ctx.save() 时的状态，并且fillStyle 恢复为'black'。 但是，在最后一个ctx.beginPath() 之后进行的所有笔操作的当前 activePath 仍然处于活动状态。这就是为什么它只填充最后一个弧。

现在，如果您只想要笔画，只需删除 所有 对 fill() 的调用，任何对 fillStyle 的引用现在都变得无关紧要了。

最后一点，ctx.save() 和 ctx.restore() 在这里只会造成伤害。 此外，由于lineWidth 不会更改，因此您只能在开始动画之前设置一次。
所以你在 draw 方法中需要的只是

draw(milliseconds) {
  const colors = ["#270f36", "#632b6c", "#c76b98", "#f09f9c", "#fcc3a3"];

  for (let ring of this.rings) {
    this.ctx.beginPath();
    this.ctx.strokeStyle = randomItemFromArray(colors);
    this.ctx.arc(ring.getOrigin.x, ring.getOrigin.y, ring.getRadius, 0, Math.PI * 2, false);
    this.ctx.stroke();
  }
}

class Ring {
  constructor() {
    this.getOrigin = {
      x: (Math.random() * innerWidth / 4) + (innerWidth / 2),
      y: (Math.random() * innerHeight / 4) + (innerHeight / 2)
    };
    this.getRadius = (Math.random() * Math.min(innerHeight, innerWidth) / 4) + 50;
  }
}
class Drawer {
  constructor() {
    this.rings = Array.from({length: 8}, ()=>new Ring());
    this.canvas = document.querySelector('canvas');
    this.canvas.width = innerWidth;
    this.canvas.height = innerHeight;
    this.ctx = this.canvas.getContext('2d');
    this.ctx.lineWidth = 10;    
  }
animate(milliseconds) {
//    const elapsed = milliseconds - this.Configs.lastStep;
//    this.Configs.lastStep = milliseconds;
    if (this.canvas) {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
    this.update(0);    window.requestAnimationFrame(this.animate.bind(this));
  }
  draw(milliseconds) {
    const colors = ["#270f36", "#632b6c", "#c76b98", "#f09f9c", "#fcc3a3"];

    for (let ring of this.rings) {
      this.ctx.beginPath();
      this.ctx.strokeStyle = randomItemFromArray(colors);
      this.ctx.arc(ring.getOrigin.x, ring.getOrigin.y, ring.getRadius, 0, Math.PI * 2, false);
      this.ctx.stroke();
    }
  }
  update(elapsed) {
    this.draw(elapsed);
  }
}
const drawer = new Drawer();
drawer.animate();


function randomItemFromArray(arr) {
  return arr[(arr.length * Math.random()) | 0];
}

<canvas></canvas>