HTML and CSS Reference
In-Depth Information
punkt durch eine gerade Linie. Der Aufruf ist optional, da der Pfad bereits durch die
angewendeten Zeichenmethoden geschlossen sein kann. Zuletzt werden die Methoden
stroke()
und
fill()
aufgerufen.
stroke()
zeichnet dabei den Umriss der gezeich-
neten Form, während
fill()
die Form ausfüllt.
Eine sehr nützliche
Methode ist
moveTo()
.
Vereinfacht ausgedrückt,
können damit Pfade gezeichnet werden, die Lücken haben. Betrachten Sie die beiden
Linien des folgenden Beispiels, die mit einem einzigen Pfad gezeichnet wurden:
//2 Linien, 5px Abstand
ctx.beginPath();
ctx.strokeStyle "rgb(0,0,255)";
ctx.moveTo(10, 10);
ctx.lineTo(260, 10);
ctx.moveTo(10, 15);
ctx.lineTo(260, 15);
ctx.stroke();
Zunächst wird
beginPath()
aufgerufen, um einen neuen Pfad zu zeichnen. Da der
Ursprung der ersten Linie der Punkt
(10,10)
sein soll, wird
moveTo(10,10)
aufgeru-
fen. Die Methode
lineTo()
zeichnet dann die erste Linie bis zum Punkt
(260, 10)
.
Ein weiteres Mal wird
moveTo()
aufgerufen, um den Ursprung der zweiten Linie 5 Pixel
unterhalb des ersten Ursprungs zu positionieren. Die zweite Linie wird gezeichnet, und
letztlich wird mittels
stroke()
gezeichnet. Es sind nun zwei nicht verbundene Linien
entstanden.
Weitere Formen, wie beispielsweise ein Dreieck, müssen ebenfalls per Pfad-API gezeich-
net werden. Um ein Dreieck zu zeichnen, wird per
moveTo()
zunächst der Ursprung der
ersten Linie angegeben. Es folgen zwei konkret per
lineTo()
gezeichnete Linien. Die
dritte Kante des Dreiecks muss nicht gezeichnet werden, da
fill()
automatisch den
Pfad schließt, also
closePath()
aufruft, dadurch den aktuellen Endpunkt mit dem
Beginn des Pfads verbindet und so das Dreieck schließt.
ctx.beginPath();
ctx.fillStyle "rgb(0,255,0)";
ctx.moveTo(10, 50);
ctx.lineTo(25, 20);
ctx.lineTo(40, 50);
ctx.fill();
Um kreisförmige Pfade zu zeichnen, stehen die Methoden
arc()
und
arcTo()
zur
Verfügung, die wie folgt deklariert werden:
void arc(in float x, in float y, in float radius, in float startAngle,
in float endAngle, in boolean anticlockwise);
void arcTo(in float x1, in float y1, in float x2, in float y2, in float
radius);
