HTML and CSS Reference
In-Depth Information
ctx.lineTo(50, 215);
ctx.stroke();
ctx.beginPath();
ctx.arc(90, 215, 20, getRadians(0), getRadians(270), false);
ctx.lineTo(90, 215);
ctx.lineTo(110, 215);
ctx.fill();
Das Ergebnis kann sich sehen lassen:
Die Methode
arcTo()
zeichnet einen kreisförmigen Abschnitt.
Schauen wir uns die Deklaration der Methode zunächst noch-
mals an:
void arcTo(in float x1, in float y1, in float x2, in float y2, in float
radius);
Zum Punkt
(x1,y1)
zeichnet
arcTo()
zunächst eine gerade Linie, ausgehend vom
aktuellen Ursprung.
(x2,y2)
gibt nun den Endpunkt des kreisförmigen Pfadabschnitts
an und
radius
den zu benutzenden Radius (vom Mittelpunkt, also
x1,y1
). Ein Beispiel
veranschaulicht das:
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(160, 100);
ctx.arcTo(180, 100, 180, 120, 20);
ctx.lineTo(180, 180);
ctx.arcTo(180, 200, 120, 200, 20);
ctx.lineTo(120, 200);
ctx.arcTo(80, 200, 80, 180, 20);
ctx.lineTo(80, 120);
ctx.arcTo(80, 100, 100, 100, 20);
ctx.fill();
Die Benutzung der
arcTo()
-Methode braucht sicherlich etwas Übung. Sie sollten nicht
vergessen, dass die ersten beiden Parameter einen Punkt angeben, zu dem zunächst eine
gerade Linie gezeichnet wird und der später als Mittelpunkt des Kreises fungiert. Die
nächsten beiden Parameter geben den Endpunkt an, also den Punkt, zu dem ein Kreis-
abschnitt gezeichnet werden soll. Der letzte Parameter gibt den Radius des Kreises an.
Die Methoden
quadraticCurveTo()
und
bezierCurveTo()
werden meist für organi-
sche Formen verwendet. Sie sind wie folgt deklariert:
void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float
cp2y, in float x, in float y);
Der wichtigste Unterschied ist, dass
quadraticCurveTo
lediglich einen Kontrollpunkt
benötigt, da die Funktion quadratisch und damit symmetrisch ist.
bezierCurveTo()
braucht zwei Kontrollpunkte und ist daher flexibler. Folgende Darstellung zeigt je ein
Beispiel.
