为什么我的弧线宽度没有清除？

Question

我试图在画布上绘制两个形状。第一个是半圈。第二个是一条线。

半圈：

this.ctx.beginPath();
this.ctx.arc(cs, cs, radius, angle, angle+Math.PI, true);
this.ctx.fillStyle = '#FC4F54';
this.ctx.fill();
this.ctx.stroke();
this.ctx.closePath();

行：

var x = (Math.cos(angle + Math.PI/2) * this.canvasSize) + cs;
var y = (Math.sin(angle + Math.PI/2) * this.canvasSize) + cs;

this.ctx.beginPath();
this.ctx.moveTo(cs,cs);
this.ctx.lineTo(x,y);
this.ctx.lineWidth = 2 * radius;
this.ctx.strokeStyle = "#ffffff[![enter image description here][1]][1]";
this.ctx.stroke();
this.ctx.closePath();

当我按照上面显示的顺序运行它时，我得到了这个结果：

但是当我改变两个的顺序，所以线是第一个，这就是结果：

如果我增加弧的半径，对于第二个，我开始看到中心的红色。这让我觉得不知何故，线条的lineWidth正在越过弧线样式。但是，如果我尝试将圆的lineWidth显式设置为零，则它无效。

我错过了什么？

Answer 1

弧的外观是由您怀疑的更改为lineWidth引起的。

当您尝试将lineWidth设置为0时，这无效，因为忽略了零值，如in this documentation所述。

如果在绘制圆弧之前将lineWidth设置为1，那么无论您绘制圆弧和线条的顺序如何，都会得到相同的结果。