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 4: Dessiner les formes de base - II

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 (Suite)

Dessiner des lignes

Pour dessiner les lignes, on procède de la même manière que pour les arcs (ou cercles), c'est à dire, on ordonne le début du traçage à l'aide de la méthode beginPath(), on spécifie si on veut avoir une forme pleine ou creuse par fill() ou stroke() (bien entendu une ligne ne peut avoir qu'une bordure et non pas un fond) puis en déclare la fin du traçage par la méthode closePath(). Néanmoins, on aura recours à deux méthodes supplémentaires à savoir:
  • moveTo(x,y) qui indique au navigateur que le traçage de la ligne commencera au point dont les coordonnées sont x et y.
  • lineTo(x,y) qui indique au navigateur d'effectuer le traçage jusqu'au point dont les coordonnées sont x et y.

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.moveTo(40,40);
            context.lineTo(200,160);
            context.stroke();
            context.closePath();
         }
      </script>
   </head>
   <body>
      <canvas id="canv" width="240" height="200">
      </canvas>
   </body>
</html>
Ce qui donne:

Dessiner des polygones

Vous avez certainement compris que pour tracer un polygone il suffit d'ajouter autant de méthodes lineTo() que de cotés. Si par exemple on veut dessiner un triangle alors on aura besoin de 3 méthodes lineTo() qui se succèderont. Bien entendu, les coordonnées de la dernière méthode lineTo() seront identiques à ceux de la méthode moveTo() pour ne pas avoir une forme ouverte. Si on veut avoir un polygone plein on utilisera la méthode fill(), et pour ne tracer que les cotés on utilisera stroke().

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.moveTo(40,40);
            context.lineTo(200,40);
            context.lineTo(120,160);
            context.lineTo(40,40);
            context.fill();
            context.closePath();
         }
      </script>
   </head>
   <body>
      <canvas id="canv" width="240" height="200">
      </canvas>
   </body>
</html>
Ce qui donne: