Dessiner une spirale dans un canvas HTML5

Bon matin chers lecteurs. J'espère que tout comme moi, vous vous êtes remis de votre consommation de bière d'hier soir et que vous vous sentez d'attaque pour expérimenter un peu plus le canvas HTML5.

Le petit exercice que j'ai à proposer aujourd'hui sera de tracer une spirale dans le canvas en utilisant un minimum de JavaScript.

Pour débuter, on déclare un canvas dans notre document HTML.

<canvas id="myCanvas" width="500" height="500" style="background-color:black;"></canvas>

En CSS, on lui appliquera une couleur de fond, par exemple noir. Ceci permettra de donner de la flexibilité dans le cas où on voudrait modifier dynamiquement la couleur de fond après avoir fait le tracé car les deux éléments sont complètement dissociés.

<button onclick="document.getElementById('myCanvas').style.backgroundColor='green';">Changer la couleur de fond</button>

On récupère une référence au canvas avant de commencer à dessiner :

var canvas = document.getElementById('myCanvas');

if(canvas && canvas.getContext){

   var context = canvas.getContext('2d');

   // placer ici le code pour tracer la spirale
}

Une fois une référence obtenue, on se déplace au centre du canvas qui correspondra aussi avec le point central de la spirale.

context.translate(250,250);
context.moveTo(0,0);

On définit les propriétés de la couleur du tracé ainsi que de l'épaisseur de la ligne.

context.strokeStyle = '#FFCC33'; // orange
context.lineWidth = 2;

Après avoir déclaré quelques variables dont celles définissant le nombre de circonvolutions (un mot savant pour décrire un tour autour d'un point central) et l'espacement entre chacune, on lance une boucle qui calculera chaque point nécessaire pour tracer la spirale.

var x, y;
var degresEnRadian = 0;
var circonvolutions = 15;
var espacement = 2;

for(var degres = 0; degres<=(360*circonvolutions); degres++){
   degresEnRadian = degres * (Math.PI/180);
   x = espacement * degresEnRadian * Math.cos(degresEnRadian);
   y = espacement * degresEnRadian * Math.sin(degresEnRadian);

   context.lineTo(x,y);
}

Si vous ne voyez rien apparaître, c'est que vous n'avez que défini le trajet qu'empruntera la spirale. Pour la voir apparaître, il suffit d'invoquer la méthode stroke() du canvas, une seule fois, immédiatement après la boucle for.

context.stroke();

Le résultat devrait avoir l'air de ceci (vous pouvez compter le nombre de spires à partir de la fin du tracé sur l'axe des x jusqu'au centre pour voir que ça égale le nombre de circonvolutions demandé).