Tracer un arc dans Canvas: tutoriel et démo interactive

L'arc est la base de nombreuses figures géométriques, il a une forme symétrique et peut se définir à partir de deux angles.

Figure simple, usages complexes

Une combinaison d'arcs peut former des figures telles que celle sur la droite où l'orientation peut changer mais où chaque fragment de courbe est un arc et donc est symétrique.
Pour réaliser des figures non symétriques, on utiliserait les méthodes de courbes.

La méthode arc dépend d'une position, un rayon et deux angles

La fonction arc à six paramètres:

1. Le point de départ horizontal.
2. Le point de départ vertical.
3. Le rayon.
4. L'angle de départ. Détermine l'inclinaison initiale.
5. L'angle terminal. Détermine la courbure.
6. Un drapeau pour l'inversion du sens de rotation: false dans le sens des aiguilles d'une montre, true sinon.

Ce qui donne la syntaxe suivante:

arc(x, y, rayon, angleInitial, angleFinal,  [true | false])

Exemple d'instruction arc:

context.arc(100,5, 70, Math.PI, 1,5 * Math.PI,  true); 

Le point x,y peut être le début d'une nouvelle figure, dans ce cas l'appel de arc() est précédé de beginPath. L'arc peut aussi se placer dans le prolongement d'une figure déja tracée, alors, il récupère les attributs de celui-ci et la position du dernier point tracé est sa position de départ.

Une démonstration simple...

L'angle de départ est de 0 et l'angle final est de PI. Le rayon est de 70 pixels. Le sens de rotation est false (celui des aiguilles d'une montre).

Le code:

context.arc(150, 5, 70, 0, Math.PI, false); 

Changer le sens de rotation

Par défaut le sens de rotation est celui des aiguilles d'une montre et il vaut "false". On peut inverser la direction avec un sixième paramètre optionnel.

Si on donne la valeur true au sixième paramètre, l'arc sera donc dessiné dans le sens inverse des aiguilles d'une montre.
Exemple comme ci-dessus mais avec un sens de rotation inversé:

Code:

context.arc(150, 75, 70, 0, Math.PI, true);

Comment définir les angles de l'arc

L'angle a une valeur réelle qui va de 0 à 2 fois PI que l'on exprime en JavaScript par 2 * Math.PI.
Cette dernière valeur correspond à 360° (mais les valeurs d'angle ne sont pas exprimées en degrés).
On reprend l'exemple ci-dessus avec angle initial de PI et final de deux fois PI:

Code:

context.arc(150, 75, 70, Math.PI, 2 * Math.PI, false);

Et l'on retrouve l'arc précédent car on a à chaque fois le complément de l'angle du premier exemple.

Faire un arc à gauche

Quand on trace dans le sens des aiguilles d'une montre, un demi-cercle à un angle de départ de 0 et un angle final de PI.
Un cercle va de 0 à 2 fois PI.
Pour tracer un demi-cercle sur la gauche, on démarre donc à PI / 2 et on termine à 1.5 fois PI. Démonstration:

Pour tracer un arc à droite, on attribue la valeur "true" au paramètre du sens de rotation ou l'on prend des valeurs d'angles de 1.5 PI et 0.5 PI.

Tracé d'un arc en animation

Pour voir comment cela fonctionne, on va dans une animation faire varier l'angle de départ et l'angle final de 0 à 2*PI.

Valeur d'angle initial et final:

Code de la démonstration:

var angle = 0;
var delay; 

function drawAngle(ctxa)
{
  ctxa.arc(150, 50, 40, angle, angle);
  ctxa.stroke();
  angle+=0.1;
  if(angle > 2 * Math.PI) {clearInterval(delay);return;}
  document.getElementById("angle").value = Math.round(angle * 100)/100;
}  

function setAngle()
{
  angle=0;
  var canvas = document.getElementById("canvas4");
  var ctxa = canvas.getContext("2d");
  ctxa.lineWidth="3";
  ctxa.beginPath();	 
  delay = setInterval(function(){ drawAngle(ctxa); }, 100);
}
setAngle();

Démonstration interactive de la méthode arc

Comment choisir un angle de départ et de fin, comment donner un sens de rotation, et l'interaction entre tous ces facteurs...
Le meilleur moyen de les comprendre est par une démonstration interactive.

Le code HTML

<canvas id="canvasDemo" width="402" height="202" style="border:1px solid #CCC;background:white">
  Canvas requires a modern browser: Chrome, Firefox, IE9, Safari.
</canvas>

function setArc()
{
  var canvas = document.getElementById("canvasDemo"); 
  var context = canvas.getContext("2d");
  
  var x = document.getElementById("x").value;
  var y = document.getElementById("y").value;
  var radius = document.getElementById("radius").value;
  var initial = document.getElementById("startangle").value;
  var final = document.getElementById("endangle").value;
  if(document.getElementById("clock1").checked)
  	clock = true;
  else	
  	clock = false;
  context.beginPath();
  context.lineWidth="2";
  context.arc(x, y, radius, initial, final, clock)
  context.stroke();
}

function erase()
{
  var canvas = document.getElementById("canvasDemo"); 
  var context = canvas.getContext("2d");
  context.clearRect(0,0, canvas.width, canvas.height); 
}