Ich möchte eine Form zeichnen, die eine doppelte Linie Grenze hat mit html5 Leinwand Pfad. Der Standardstrich (context.stroke()) hat einen einzelnen Linientyp des Pfads. Ich kann eine ähnliche Form innerhalb einer ursprünglichen Form zeichnen, um eine Figur zu erzeugen, die aussieht wie eine mit zwei Grenzlinien, aber ich möchte eine generische Lösung. Irgendwelche Ideen?Doppellinie Strich in html5 Leinwand
Es gibt mehrere Möglichkeiten, dies zu tun. Ein einfacher Weg wäre, eine fette Linie zu zeichnen und die Mitte davon zu "schneiden", wobei zwei kleinere Striche zurückbleiben.
Was Sie tun möchten, ist jede Art von Weg zu ziehen - auf einen im Speicher, temporäre Leinwand - und dann mit geringeren Dicke den gleichen Weg ziehen und mit dem globalCompositeOperation Satz zu destination-out auf derselben Leinwand.
Das wird Ihnen die Form, die Sie wollen, im Wesentlichen 2 Zeilen mit Transparenz zwischen ihnen.
Dann Sie zeichnen diese Leinwand auf die echte Leinwand, die was auch immer darauf (komplexen Hintergrund, etc) hat.
Hier ist ein Beispiel:
Tolle Idee! Ich wollte vorschlagen, einmal zu zeichnen und die Größe zu ändern, aber das würde Unschärfe hinzufügen. Ihre Lösung macht klare Linien. Ich denke, es gibt keinen besseren Weg. – naugtur