HTML5-Canvas – Ein Beispiel für die Verwendung von Pfaden zum Zeichnen von Linien. HTML5-Tutorial-Fähigkeiten

Originaltext:
http://www.lifelaf.com/blog/?p=371
Dieser Artikel ist eine Übersetzung aus Steve Fulton & Jeff Fulton HTML5 Canvas, Kapitel 2, „Using Paths „Linien erstellen“

Für HTML5 Canvas können wir „Pfad“ verwenden, um beliebige Grafiken zu zeichnen. Ein Pfad besteht einfach aus einer Reihe von Punkten und den 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.

Anfang und Ende des Pfades

Rufen Sie beginPath() auf, um einen Pfad zu starten, und der Aufruf von closePath() beendet den Pfad. Wenn Sie Punkte in einem Pfad verbinden, bildet die Verbindung einen „Unterpfad“. Wir betrachten einen „Unterpfad“ als „geschlossen“, wenn der letzte Punkt im „Unterpfad“ mit seinem eigenen ersten Punkt verbunden ist.

Zeichnen von Linien

Die einfachste Pfadoperation besteht aus dem wiederholten Aufruf der Befehle moveTo() und lineTo(). Zum Beispiel das folgende Beispiel:

Kopieren Sie den Code

Der Code lautet wie folgt:

function drawScreen() {
context.strokeStyle = "black";
context.lineWidth = 10;
context.beginPath(); context.moveTo(20, 0);
context.lineTo(100, 0);
context.closePath(}


Im obigen Beispiel zeichnen wir ein horizontales Liniensegment mit einer Breite von 10 Pixeln und legen gleichzeitig die Eigenschaften lineCap und StrokeStyle fest. Im Folgenden finden Sie eine Liste einiger häufig verwendeter Attribute:

lineCap

lineCap definiert den Stil beider Enden des Liniensegments in Canvas und kann auf einen der folgenden drei Werte festgelegt werden:

Hintern. Standard: Fügt an beiden Enden des Liniensegments gerade Kanten hinzu.
rund. Fügen Sie an jedem Ende des Drahtsegments eine halbkreisförmige Drahtkappe hinzu. Der Durchmesser der Drahtkappe entspricht der Breite des Drahtsegments.
quadratisch. Bringen Sie an beiden Enden des Drahtsegments quadratische Drahtkappen an. Die Seitenlänge der Drahtkappe entspricht der Breite des Leitungssegments.
lineJoin
lineJoin definiert den Eckstil am Schnittpunkt zweier Liniensegmente. Im Folgenden sind drei optionale Werte aufgeführt:

mitre. Standard: Erstellt eine scharfe Ecke. Sie können die Länge der Spitze begrenzen, indem Sie das Attribut miterLimit festlegen. MiterLimit ist der Maximalwert des Verhältnisses der Länge der Spitze zur Linienbreite und der Standardwert ist 10.
Abschrägung. Erstellen Sie eine Abschrägung.
rund. Erstellen Sie eine abgerundete Ecke.
lineWidth
lineWidth definiert die Dicke der Linie, der Standardwert ist 1,0.

StrokeStyle
StrokeStyle definiert die Farbe und andere Stile, die zum Rendern von Linien verwendet werden.


Übersetzungshinweis:
Wenn lineJoin auf Gehrung eingestellt ist, die Länge der scharfen Ecke jedoch den Grenzwert von miterLimit überschreitet, zeigt Canvas den Eckeneffekt „Abschrägung“ an.