Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.
La méthode CanvasRenderingContext2D
.arc()
de l'API Canvas 2D permet d'ajouter un arc de cercle au tracé, en le centrant aux positions (x, y) et avec un rayon r qui démarre à angleDépart et qui finit à angleFin, dans la direction de sensAntiHoraire (par défaut en sens horaire).
Syntaxe
void ctx.arc(x, y, rayon, angleDépart, angleFin, sensAntiHoraire);
Paramètres
x
- La position en x du centre de l'arc.
y
- La position en y du centre de l'arc.
rayon
- Le rayon de l'arc.
- angleDépart
- La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.
angleFin
- La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.
- sensAntiHoraire Facultatif
- Un
Booléen
optionnel qui, si àtrue
, indique que l'arc sera dessiné dans le sens anti-horaire entre les deux angles. Par défaut, la valeur est le sens horaire.
Exemples
En utilisant la méthode arc
Voici un code simple permettant de dessiner un cercle.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(75, 75, 50, 0, 2 * Math.PI); ctx.stroke();
Modifiez le code ci-dessous et voyez les changements en direct sur le canvas:
Exemple avec différentes formes
Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par arc()
.
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Draw shapes for (i=0;i<4;i++){ for(j=0;j<3;j++){ ctx.beginPath(); var x = 25+j*50; // coordonnée en x var y = 25+i*50; // coordonnée en y var radius = 20; // rayon de l'arc var startAngle = 0; // Point de départ de l'arc de cercle var endAngle = Math.PI+(Math.PI*j)/2; // Point de fin de l'arc de cercle var clockwise = i%2==0 ? false : true; // sens horaire ou anti-horaire ctx.arc(x,y,radius,startAngle,endAngle, clockwise); if (i>1){ ctx.fill(); } else { ctx.stroke(); } } }
Screenshot | Live sample |
---|---|
Spécifications
Spécification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard La définition de 'CanvasRenderingContext2D.arc' dans cette spécification. |
Standard évolutif |
Compatibilité des navigateurs
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) |
Notes spécifiques à Gecko
Avec Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1):
- Le paramètre
sensAntiHoraire
est optionnel, - Une valeur négative pour le rayon lance une exception de type
IndexSizeError
("Index or size is negative or greater than the allowed amount").
Voir aussi
- L'Interface JavaScript à laquelle appartient la méthode :
CanvasRenderingContext2D