Information Technology Reference
In-Depth Information
5.5.1 Linien
Zur Konstruktion von Linienzügen wie im Buchstaben-Beispiel stellt Canvas
die Methode
lineTo()
zur Verfügung:
Abbildung 5.7:
Die Pfadmethode »lineTo()«
context.lineTo(x, y)
Übersetzt bedeutet das so viel wie »Linie zum Punkt x/y«, womit klar wird, dass
der Ausgangspunkt schon vorher über
moveTo()
oder als Endpunkt der letzten
Zeichenoperation existieren muss. Nach dem Zeichnen wird die Koordinate
x
/
y
zum neuen aktuellen Punkt.
HINWEIS
Bei allen Grafiken zur Erklärung der Pfad-Zeichenmethoden sind der Ausgangs-
punkt
x0
/
y0
in Hellgrau und der neue aktuelle Punkt in fetter Schrift ausgewiesen.
5.5.2 Bézierkurven
Canvas kennt zwei Arten von Bézierkurven: quadratische und kubische, die
fälschlicherweise nur als
bezierCurveTo()
bezeichnet werden.
context.quadraticCurveTo(cpx, cpy, x, y)
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)