CanvasRenderingContext2D.arc()

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:

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
ctx.stroke();</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

Exemple avec différentes formes

Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par arc().

HTML
<canvas id="canvas" width="150" height="200"></canvas>
JavaScript
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();
    }
  }
}

ScreenshotLive 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

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : jmpp
 Dernière mise à jour par : jmpp,