Dessiner avec Javascript et la balise canvas

Auteur: Mohamed CHINY Durée necessaire pour le cours de Dessiner avec Javascript et la balise canvas Niveau recommandé pour le cours de Dessiner avec Javascript et la balise canvas Supports vidéo disponibles pour ce cours Exercices de renforcement non disponibles pour ce cours Quiz non disponibles pour ce cours

Page 3: Dessiner les formes de base - I

Toutes les pages

Dessiner avec Javascript et la balise canvas

Page 1
La balise canvas
Page 2
Contexte de rendu et couleurs
Page 3
Dessiner les formes de base - I
Page 4
Dessiner les formes de base - II
Page 5
Ecrire du texte et importer des images
Page 6
Animer les dessins sur un canvas

Formes géométriques de base

Spécifier l'épaisseur des lignes et bordures

On peut spécifier l'épaisseur de la bordure des formes qui en disposent comme les lignes ou les formes creuses (rectangles ou cercles). Cette épaisseur sera applicable dans le reste du code qui suit sa définition.

L'attribut lineWidth accepte comme valeur un entier qui désigne l'épaisseur en pixels. Si on souhaite changer d'épaisseur de bordure d'un objet particulier alors il faut redéfinir cet attribut avec la nouvelle valeur juste avant le dessin de l'objet en question.

Le code qui permet de spécifier l'épaisseur des bordure est le suivant:
canvas=document.getElementById("moncanvas");
context=canvas.getContext("2d");
context.lineWidth=2;
Désormais, tous les objets creux (ou lignes) qui seront dessinés sur le canvas auront une bordure épaisse de 2 pixels.

Origine de dessin

Tous les objets que l'on dessinera sur le canvas doivent être positionnés sur celui-ci selon un système de coordonnées dont l'origine est le coin haut à gauhe, exactement comme pour le CSS quand on veut positionner un objet sur le navigateur.

Dessiner des rectangles

Pour dessiner un rectangle plein on fait appel à la méthode fillRect(x , y, l, h) dont les arguments sont:
  • x: abscisse du coin supérieur gauche du rectangle par rapport à l'origine du canvas.
  • y: ordonnée du coin supérieur gauche du rectangle
  • l: largeur du rectangle en pixels
  • h: hauteur du rectangle en pixels


Exemple:
<!DOCTYPE html>
<html>
   <head>
      <style>
         #canv{
            border:solid 1px #EEE;
         }
      </style>
      <script>
         window.onload=function(){
            canvas=document.getElementById("canv");
            context=canvas.getContext("2d");
            context.fillStyle="#FF0000";
            context.strokeStyle="rgb(255,127,0)";
            context.lineWidth=2;
            context.fillRect(40,40,100,100);
         }
      </script>
   </head>
   <body>
      <canvas id="canv" width="240" height="200">
      </canvas>
   </body>
</html>
Ce qui donne:

La méthode strockeRect(x , y, l, h) permet de dessiner un rectangle creux et les paramètres sont les même que pour la méthode fillRect().

Exemple:

<!DOCTYPE html>
<html>
   <head>
      <style>
         #canv{
            border:solid 1px #EEE;
         }
      </style>
      <script>
         window.onload=function(){
            canvas=document.getElementById("canv");
            context=canvas.getContext("2d");
            context.fillStyle="#FF0000";
            context.strokeStyle="rgb(255,127,0)";
            context.lineWidth=2;
            context.strokeRect(40,40,100,100);
         }
      </script>
   </head>
   <body>
      <canvas id="canv" width="240" height="200">
      </canvas>
   </body>
</html>
Ce qui donne:

Dessiner des arcs et des cercles

Un arc est un morceau d'un cercle. Il est donc caractérisé par le centre et le rayon du cercle porteur et les angles de début de et fin.

Pour tracer un arc on fait appels aux méthodes suivantes:
  • beginPath(): qui indique au navigateur que l'on veut commencer le dessin d'une forme.
  • closePath(): qui indique au navigateur que l'on a fini de tracer la forme en question.
  • fill(): qui ordonne de remplir la forme tracée.
  • stroke(): qui ordonne de tracer juste le contour de la forme sans remplissage.

La méthode arc(x , y , r , ang_d, ang_f) permet de tracer l'arc proprement dit. Les arguments qu'il faut lui renseigner sont:
  • x: abscisse du centre du cercle porteur
  • y: ordonnée du centre du cercle porteur
  • r: rayon du cercle
  • ang_d: angle de début de traçage en Radians
  • ang_f: angle de fin de traçage en Radians

Notez que les angles évoluent dans le sens horaire.

Exemple:
<!DOCTYPE html>
<html>
   <head>
      <style>
         #canv{
            border:solid 1px #EEE;
         }
      </style>
      <script>
         window.onload=function(){
            canvas=document.getElementById("canv");
            context=canvas.getContext("2d");
            context.fillStyle="#FF0000";
            context.strokeStyle="rgb(255,127,0)";
            context.beginPath();
            context.arc(120,100,80,0,Math.PI);
            context.fill();
            context.closePath();
         }
      </script>
   </head>
   <body>
      <canvas id="canv" width="240" height="200">
      </canvas>
   </body>
</html>
Ce qui donne:

Vous avez compris que pour dessiner un cercle il suffit de remplacer le dernier argument de la méthode arc() par la valeur Math.PI*2.