Méthode HTML canvas arc()
Définition et utilisation
arc() La méthode crée un arc/courbe (utilisé pour créer un cercle ou une partie de cercle).
Astuce :Pour créer un cercle en utilisant arc() , réglez l'angle de départ sur 0，l'angle de fin est réglé sur 2*Math.PI.
Astuce :Utilisez stroke() ou fill() La méthode dessine un arc réel sur le canevas.
- Centre : arc(
100,75,50,0*Math.PI,1.5*Math.PI) - Angle de départ : arc(100,75,50,
0,1.5*Math.PI) - Angle de fin : arc(100,75,50,0*Math.PI,
1.5*Math.PI)
Exemple
Créer un cercle :
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
Syntaxe
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
Valeur du paramètre
| Paramètres | Description |
|---|---|
| x | Coordonnée x du centre du cercle. |
| y | Coordonnée y du centre du cercle. |
| r | Rayon du cercle. |
| sAngle | Angle de départ, en radians. (La position circulaire de 3 heures du cercle est de 0 degrés). |
| eAngle | Angle de fin, en radians. |
| counterclockwise | Optionnel. Détermine si le dessin doit être effectué dans le sens des aiguilles d'une montre ou dans le sens inverse des aiguilles d'une montre. False = dans le sens inverse des aiguilles d'une montre, true = dans le sens des aiguilles d'une montre. |
Support du navigateur
Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.
