Warum löscht sich meine Lichtbogenlinienbreite nicht?

Question

Ich versuche, zwei Formen auf einer Leinwand zu zeichnen. Der erste ist ein Halbkreis. die zweite ist eine Linie.

Halbkreis:

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

Line:

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

Als ich sie in der Reihenfolge ausgeführt oben ich dieses Ergebnis zu erhalten gezeigt:

Aber wenn ich ändern Um die Reihenfolge der beiden herum ist also die Linie zuerst, das ist das Ergebnis:

Wenn ich erhöhe den Radius des Bogens, zum zweiten, beginne ich die rote Farbe in der Mitte zu sehen. Was mich denken lässt, dass irgendwie die Linienbreite von der Linie in den Bogenstil übergeht. Wenn ich jedoch versuche, die lineWidth für den Kreis explizit auf Null festzulegen, hat es keine Auswirkung.

Was habe ich verpasst?

Answer 1

Das Aussehen des Bogens wird durch die Änderung der Linienbreite verursacht, wie Sie vermutet haben.

Wenn Sie versucht haben, die lineWidth auf 0 zu setzen, hatte dies keine Auswirkungen, da ein Wert von 0 ignoriert wird, wie angegeben in this documentation.

Wenn Sie die Linienbreite auf 1 vor dem Ziehen des Lichtbogens gesetzt, dann werden Sie das gleiche Ergebnis je nachdem, was Sie bestellen den Bogen und die Linie in zeichnen.