HTML and CSS Reference
In-Depth Information
Schauen wir uns zunächst die Methode arc() an. Die ersten beiden Parameter, hier x
und y , geben den Mittelpunkt an. Der dritte Parameter, radius , gibt den Kreisradius
an. startAngle und endAngle bestimmen den Start- und Endwinkel des zu zeichnen-
den Kreises im Bogenmaß. Durch anticlockwise kann die Zeichenrichtung umge-
dreht werden.
Da wir im Umgang mit Kreisen meistens in Grad denken, erstellen wir zunächst eine
Funktion, die uns die Gradzahl ins Bogenmaß umrechnet:
function getRadians(deg)
{
return (Math.PI/180)*deg;
}
Durch diese kleine Hilfsfunktion können wir dann recht einfach einen Kreis zeichnen.
Das folgende Beispiel zeichnet vier kreisförmige Formen. Nur die erste stellt einen
vollständigen Kreis dar. Wir ziehen pro Durchgang der Schleife 90 Grad ab und erhalten
auf diese Weise unterschiedliche Formen:
for (var i 0; i < 4; i++)
{
ctx.beginPath();
var x 30 + (60*i);
ctx.arc(x, 125, 20, getRadians(0), getRadians(360 (90*i)), false);
ctx.fill();
}
for (var i 0; i < 4; i++)
{
ctx.beginPath();
var x 30 + (60*i);
ctx.arc(x, 170, 20, getRadians(0), getRadians(360 (90*i)), false);
ctx.stroke();
}
Das folgende Bild zeigt das Resultat sowohl für den Aufruf von stroke(), um den
Umriss der Form zu zeichnen, als auch für den Aufruf von fill(), um die gezeichnete
Form gefüllt darzustellen:
Um einen Dreiviertelkreis zu
zeichnen, reicht also die arc() -
Methode allein nicht aus. Das
Problem ist, dass der Start- und
Endpunkt des gezeichneten Pfads
durch eine gerade Linie verbunden
wird. Um den Dreiviertelkreis zu
zeichnen, bedarf es zwei weiterer
Linien:
ctx.beginPath();
ctx.arc(30, 215, 20, getRadians(0), getRadians(270), false);
ctx.lineTo(30, 215);
Search WWH ::




Custom Search