Zeichnen Sie einen weiteren Rand in einer Linie auf der Leinwand

Question

Ich habe ein Problem.Ich muss einen weiteren Rand auf meiner Leinwand zeichnen.Wenn ich das versuche:

c2.beginPath();

c2.moveTo(0, 0);

c2.lineTo(0, 100);
c2.lineWidth = Number(sw) + 6;
c2.strokeStyle = "red";
c2.stroke();
c2.lineTo(100, 100);
c2.lineWidth = Number(sw) + 6;
c2.strokeStyle = "#00ec11";
c2.stroke();
c2.lineTo(0, 100);
c2.lineWidth = Number(ss) + 6;
c2.strokeStyle = "red";
c2.stroke();
c2.closePath();
c2.lineWidth = Number(sw) + 6;
c2.strokeStyle = "#00ec11";
c2.stroke();

c2.fill();

Es funktioniert nicht, da alle Zeilen einen grünen Rand haben.Kannst du mir helfen?

--- Bearbeiten:Ich kann den Patch nicht schließen, wenn ich meine Linie schließe, da diese Linienzeichnungsform verwendet wird.Wenn ich den Patch schließe, ist meine Form nicht korrekt.Vielleicht noch andere Ideen?

Answer 1

c2.stroke(); Zeichnet den gesamten Pfad bis zu diesem Punkt mit dem aktuellen StrokeStyle neu.Am Ende wird also nur der letzte Stil angewendet.

Versuchen Sie es hinzuzufügen c2.closePath(); gefolgt von c2.beginPath() nach jedem c2.stroke() um einen neuen Pfad zu beginnen, der einen separaten StrokeStyle haben kann.

Zum Beispiel:

c2.lineTo(0, 100);
c2.lineWidth = Number(sw) + 6;
c2.strokeStyle = "red";
c2.stroke();
c2.closePath();

c2.beginPath();
c2.moveTo(0, 100);
c2.lineTo(100, 100);
c2.lineWidth = Number(sw) + 6;
c2.strokeStyle = "#00ec11";
c2.stroke();
c2.closePath();
. 
. 
.