Méthode arc()
Exemple
Créer un cercle :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke(); Plus d'exemples ci-dessous.
Description
La méthode arc() ajoute un arc (courbe) au chemin.
La méthode arc() crée un cercle ou une partie d'un cercle.
Utilisez la méthode stroke() ou fill() pour dessiner le chemin.
Remarque
Pour créer un cercle : réglez l'angle de départ à 0 et l'angle de fin à 2*Math.PI.
Pour créer un demi-cercle : réglez l'angle de départ à 0 et l'angle de fin à Math.PI.
Voir aussi :
La méthode beginPath() (Commencer un nouveau chemin)
La méthode closePath() (Fermer le chemin actuel)
La méthode moveTo() (Déplacer le chemin vers un point)
La méthode lineTo() (Ajouter une ligne au chemin)
La méthode fill() (Remplir le chemin actuel)
La méthode stroke() (Dessiner le chemin actuel)
La méthode arcTo() (Ajouter un cercle au chemin)
La méthode bezierCurveTo() (Ajouter une courbe au chemin)
La méthode quadraticCurveTo() (Ajouter une courbe au chemin)
Syntaxe
| context .arc( x, y, r, sAngle, eAngle, counterclockwise ) |
Valeurs des paramètres
| Param | Description | Essayez-le |
|---|---|---|
| x | La coordonnée x du centre du cercle | |
| y | La coordonnée y du centre du cercle | |
| r | Le rayon du cercle | |
| sAngle | L'angle de départ, en radians (0 est à la position 3 heures du cercle de l'arc) | |
| eAngle | L'angle de fin, en radians | |
| counterclockwise | Optionnel. Spécifie si le dessin doit être dans le sens antihoraire ou horaire. False est par défaut, indiquant le sens horaire, tandis que true indique le sens antihoraire. |
Valeur de retour
| AUCUN |
Plus d'exemples
Exemple
Dessiner un cercle orange :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "orange";
ctx.fill(); Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
arc() est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |