Javascript 为什么最近绘制的弧的填充为黑色，即使填充设置为'；rgba（0,0,0,0）和#x27；，？

我正在尝试添加一个边框为40px（笔划）且没有背景（填充）的圆

我已经让它工作了——它只是最近画的一个圆圈，它的填充为黑色，尽管我正在将它（和所有其他的）设置为“rbg（0,0,0,0）”

我希望所有的环都是透明的，但是最后一个添加到环数组中的环总是填充黑色

我被难住了——任何想法都将不胜感激

---

您正在调用

animate

函数中的

ctx.fill（）

。此时，您已将上下文的属性还原为调用

ctx.save（）

时的属性，

fillStyle

已还原为

'black'

。 但是，在最后一次

ctx.beginPath（）

之后进行的所有笔操作的当前活动路径仍然处于活动状态。这就是为什么它只填充最后一个弧

现在，如果只需要笔划，只需删除对

fill（）

的调用all即可，对

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();
  }
}

类环{
构造函数（）{
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；
}
}
班级抽屉{
构造函数（）{
this.rings=Array.from（{length:8}，（）=>new Ring（））；
this.canvas=document.querySelector（'canvas'）；
this.canvas.width=内部宽度；
this.canvas.height=内部高度；
this.ctx=this.canvas.getContext（'2d'）；
this.ctx.lineWidth=10；
}
设置动画（毫秒）{
//const appead=毫秒-this.Configs.lastStep；
//this.Configs.lastStep=毫秒；
if（this.canvas）{
this.ctx.clearRect（0，0，this.canvas.width，this.canvas.height）；
}
this.update（0）；window.requestAnimationFrame（this.animate.bind（this））；
}
绘制（毫秒）{
常量颜色=[“#270f36”、“#632b6c”、“#c76b98”、“#f09f9c”、“#fcc3a3”]；
为了（让这个戒指响起来。戒指）{
this.ctx.beginPath（）；
this.ctx.strokeStyle=randomItemFromArray（颜色）；
this.ctx.arc（ring.getOrigin.x，ring.getOrigin.y，ring.getRadius，0，Math.PI*2，false）；
这个.ctx.stroke（）；
}
}
更新（已过）{
这个。画（过去）；
}
}
常量抽屉=新抽屉（）；
drawer.animate（）；
函数randomItemFromArray（arr）{
返回arr[（arr.length*Math.random（））| 0]；
}

---

您正在调用

函数中的
ctx.fill（）
。此时，您已将上下文的属性还原为调用
ctx.save（）
时的属性，
fillStyle
已还原为
'black'
。
但是，在最后一次
ctx.beginPath（）
之后进行的所有笔操作的当前活动路径仍然处于活动状态。这就是为什么它只填充最后一个弧

现在，如果只需要笔划，只需删除对
fill（）
的调用all即可，对
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();
  }
}


类环{
构造函数（）{
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；
}
}
班级抽屉{
构造函数（）{
this.rings=Array.from（{length:8}，（）=>new Ring（））；
this.canvas=document.querySelector（'canvas'）；
this.canvas.width=内部宽度；
this.canvas.height=内部高度；
this.ctx=this.canvas.getContext（'2d'）；
this.ctx.lineWidth=10；
}
设置动画（毫秒）{
//const appead=毫秒-this.Configs.lastStep；
//this.Configs.lastStep=毫秒；
if（this.canvas）{
this.ctx.clearRect（0，0，this.canvas.width，this.canvas.height）；
}
this.update（0）；window.requestAnimationFrame（this.animate.bind（this））；
}
绘制（毫秒）{
常量颜色=[“#270f36”、“#632b6c”、“#c76b98”、“#f09f9c”、“#fcc3a3”]；
为了（让这个戒指响起来。戒指）{
this.ctx.beginPath（）；
this.ctx.strokeStyle=randomItemFromArray（颜色）；
this.ctx.arc（ring.getOrigin.x，ring.getOrigin.y，ring.getRadius，0，Math.PI*2，false）；
这个.ctx.stroke（）；
}
}
更新（已过）{
这个。画（过去）；
}
}
常量抽屉=新抽屉（）；
drawer.animate（）；
函数randomItemFromArray（arr）{
返回arr[（arr.length*Math.random（））| 0]；
}
是否会
此.ctx.restore
在每次绘制后重置填充颜色？大概默认的填充颜色是黑色。此外，在此代码中，您在哪里将最后一次填充颜色设置为透明黑色？此外，如果您尝试使用透明黑色填充，并且圆圈之前已经填充过，那么它看起来不会有任何不同。如果您不想填充，为什么还要调用
.fill（）
？是否
此.ctx.restore
每次绘制后都重置填充颜色？大概默认的填充颜色是黑色。此外，在此代码中，您在哪里将最后一次填充颜色设置为透明黑色？另外，如果你尝试用透明的黑色填充，而这个圆圈以前已经被填充过了，那么它看起来就不会有什么不同了。你为什么还要calli呢