HTML canvas arc() Methode
Definition und Verwendung
arc() Die Methode erstellt einen Bogen/Kurve (zur Erstellung von Kreisen oder Teilen von Kreisen).
Hinweis:Um einen Kreis mit arc() zu erstellen, stellen Sie den Startwinkel ein auf 0und der Endwinkel wird auf 2*Math.PI.
Hinweis:Verwenden Sie stroke() oder fill() Die Methode zeichnet tatsächlich einen Bogen auf dem Canvas.
- Zentrum: arc(
100,75,50,0*Math.PI,1.5*Math.PI) - Startwinkel: arc(100,75,50,
0,1.5*Math.PI) - Endwinkel: arc(100,75,50,0*Math.PI,
1.5*Math.PI)
Beispiel
Erstellen Sie einen Kreis:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
Syntax
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
Parameterwert
| Parameter | Beschreibung |
|---|---|
| x | X-Koordinate des Zentrums des Kreises. |
| y | Y-Koordinate des Zentrums des Kreises. |
| r | Radius des Kreises. |
| sAngle | Startwinkel, in Radiant. (Die um 3 Uhr positionierte Kreislinie ist 0 Grad.). |
| eAngle | Endwinkel, in Radiant. |
| counterclockwise | Optional. Legt fest, ob das Zeichnen im Uhrzeigersinn oder gegen den Uhrzeigersinn erfolgen soll. False = im Uhrzeigersinn, true = gegen den Uhrzeigersinn. |
Browserunterstützung
Die Zahlen in der Tabelle geben die Versionsnummer des ersten Browsers an, der diese Eigenschaft vollständig unterstützt.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.
