Metoda HTML canvas arc()
Definicja i użycie
arc() Metoda tworzy łuk/kształt (używane do tworzenia okrągów lub części okrągów).
Wskazówka:Aby utworzyć okrąg za pomocą arc(), ustaw kąt początkowy na 0i ustaw kąt końcowy na 2*Math.PI.
Wskazówka:Użyj stroke() lub fill() Metoda rysuje rzeczywisty łuk na płótnie.
- Środek: arc(
100,75,50,0*Math.PI,1.5*Math.PI) - Kąt początkowy: arc(100,75,50,
0,1.5*Math.PI) - Kąt końcowy: arc(100,75,50,0*Math.PI,
1.5*Math.PI)
Przykład
Utwórz okrąg:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
Gramatyka
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
Wartość parametru
| Parametry | Opis |
|---|---|
| x | Współrzędna x środka koła. |
| y | Współrzędna y środka koła. |
| r | Promień koła. |
| sAngle | Kąt początkowy, wyrażony w radianach. (Położenie trzeciej godziny na kółku jest 0 stopni.). |
| eAngle | Kąt końcowy, wyrażony w radianach. |
| counterclockwise | Opcjonalne. Określa, czy rysowanie ma się wykonywać w przeciwnym kierunku obrotu, False = zgodnie z zegarem, true = w przeciwnym kierunku obrotu. |
Obsługa przeglądarek
Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Uwaga:Przeglądarki Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.
