Kommentar: Wir können "Pfad" verwenden, um eine Grafik zu zeichnen. Der Pfad ist einfach eine Reihe von Punkten und die Linien, die diese Punkte verbinden. Jeder Canvas -Kontext hat nur einen "aktuellen Pfad", und wenn Context.save () aufgerufen wird, wird der "aktuelle Pfad" nicht gespeichert
Original:? P = 371
Dieser Artikel wird von Steve Fulton & Jeff Fulton HTML5 -Leinwand, Kapitel 2, übersetzt, wobei Pfade verwendet werden, um Zeilen zu erstellen
Für HTML5 -Leinwand können wir Pfade verwenden, um alle Diagramme zu zeichnen. Der Pfad ist einfach eine Reihe von Punkten und die Linien, die diese Punkte verbinden. Jeder Canvas -Kontext hat nur einen aktuellen Pfad, und wenn Kontext.Save () aufgerufen wird, wird der aktuelle Pfad nicht gespeichert.
Der Anfang und Ende des Weges
Das Aufrufen von BeginnPath () kann einen Pfad starten, während Conepath () den Pfad beendet. Wenn Sie einen Punkt im Pfad anschließen, bildet diese Verbindung einen Unterweg. Wenn der letzte Punkt im Unterfaden mit seinem ersten Punkt verbunden ist, sind wir der Ansicht, dass der Unterweg geschlossen ist.
Linienzeichnung
Die grundlegendste Pfadoperation besteht aus wiederholten Aufrufen von Befehlen moveto () und lineto (). Zum Beispiel das folgende Beispiel:
Funktion Drawscreen () {
context.strokestyle = "schwarz";
context.linewidth = 10;
context.lineecap = 'square';
context.beginPath ();
context.moveto (20, 0);
context.lineto (100, 0);
context.stroke ();
context.closepath ();
}
Im obigen Beispiel zeigen wir ein horizontales Liniensegment mit einer Breite von 10 Pixel; Gleichzeitig setzen wir auch die Linecape- und Strokestyle -Eigenschaften. Hier finden Sie eine Liste einiger häufig verwendeter Eigenschaften:
Linecap
Linecap definiert den Stil an beiden Enden des Liniensegments in Leinwand und kann auf einen der folgenden drei Werte eingestellt werden:
Hintern. Standardwert; Fügen Sie an beiden Enden des Liniensegments gerade Kanten hinzu.
runden. Fügen Sie an jedem Ende des Liniensegments eine halbkreisförmige Linienkappe hinzu. Der Durchmesser der Linienkappe entspricht der Breite des Liniensegments.
Quadrat. Fügen Sie den beiden Enden des Liniensegments Quadratlinienkappen hinzu. Die Länge der Linienkappe entspricht der Breite des Liniensegments.
LineJoin
LineJoin definiert das Eckmuster an der Kreuzung zweier Liniensegmente. Im Folgenden sind drei optionale Werte aufgeführt:
Gehrung. Standard; erstellt eine scharfe Ecke. Sie können die Länge der scharfen Winkel begrenzen, indem Sie die Gehrimit -Eigenschaft festlegen - Mitterlimit ist das maximale Verhältnis der scharfen Winkellänge und der Linienbreite und die Standardeinstellung 10.
Fase. Erstellen Sie eine Abschrägung.
runden. Erstellen Sie eine abgerundete Ecke.
Linienbreite
Die Linienbreite definiert die Dicke der Linie und die Standardeinstellung beträgt 1,0.
Strokestyle
Strokestyle definiert die Stile wie Farben, die zum Rendern von Linien verwendet werden.
Anmerkung des Übersetzers: Wenn Linejoin auf Gehrung eingestellt ist, die scharfe Ecklänge jedoch die Grenze von Gehrlimit überschreitet, zeigt Canvas den Kegeleckeffekt an.