Niveau : Confirmé

Introduction à Canvas

Tutoriel par (Développeur, Strasbourg)
Créé le , mis à jour le (43997 lectures)
Tags : javascript, chemin, html5, canvas, context2D, tracés

Sommaire


Tracés et chemins

Une fois les bases du dessin établies, les premières fonctions les plus abordables sont celles qui vont tracer des formes géométriques ou des chemins. Un tracé peut se dérouler en plusieurs étapes: initialisation, point de départ puis point d'arrivée, clôture, affichage du contour et/ou du remplissage.

Lignes, tracés, chemins

Un tracé est d'abord initialisé par la méthode beginPath()Le point de référence de début du tracé est désigné avec moveTo(x,y). Il s'agit en quelque sorte de décider à partir de quel emplacement le pinceau va être posé. Puis vient le tracé de la ligne elle-même avec la méthode lineTo(x,y) qui va ajouter un segment au chemin qui fut débuté par beginPath(). On peut ajouter autant de segments que l'on veut, puis éventuellement "fermer" la forme pour revenir automatiquement au point de départ avec closePath() .

var ctx = c.getContext("2d");
ctx.beginPath();      // Début du chemin
ctx.moveTo(50,50);    // Le tracé part du point 50,50
ctx.lineTo(200,200);  // Un segment est ajouté vers 200,200
ctx.moveTo(200,50);   // Puis on saute jusqu'à 200,50
ctx.lineTo(50,200);   // Puis on trace jusqu'à 50,200
ctx.closePath();      // Fermeture du chemin (facultative)

Voilà qui est fait le tracé est en place pourtant rien ne change à l'affichage et c'est bien normal, car il n'est mentionné nulle part de couleur, de style de trait ou de remplissage, et si l'on veut plutôt une forme pleine, ou une forme dont on n'afficherait que le contour.

Canvas vide

La forme n'apparait qu'une fois appelée l'une des deux méthodes fill() pour remplir et stroke() pour le contour. Dans l'exemple courant, il sera utile de visualiser uniquement le contour du tracé.

ctx.stroke();

Canvas path

Voici le résultat avec pour rappel les coordonnées des points utilisés :

Canvas path coordonnées

Démonstration

Styles de contour et de remplissage

Pour moduler les styles des couleurs de contour et de remplissage dont dépendent fill() et stroke() , il faut agir sur des propriétés du contexte de dessin qui sont fillStyle et strokeStyle. Les valeurs acceptées sont tous les codes couleurs reconnus par le navigateur, par exemple comme en CSS : par nom (red, black), par code hexadécimal (#f00, #000000), par code rgb, etc. On remarque qu'il s'agit ici bien de s'adresser à une propriété JavaScript et non pas de déclencher une fonction (il n'y a pas de parenthèses à la fin de la ligne, mais bien une affectation grâce au signe égal). Ces propriétés peuvent aussi accepter des dégradés ou des motifs, qui seront abordés plus tard.

La propriété lineWidth affecte l'épaisseur du trait, qui est de 1 pixel par défaut.

var c = document.getElementById('mon_canvas');
var ctx = c.getContext("2d");

// Voile du bateau
ctx.beginPath();      // Début du chemin
ctx.moveTo(150,80);   // Le tracé part du point 150,80
ctx.lineTo(300,230);  // Un segment est ajouté vers 300,230
ctx.lineTo(150,230);  // Un segment est ajouté vers 150,230
ctx.closePath();      // Fermeture du chemin
ctx.fillStyle = "lightblue"; // Définition de la couleur de remplissage
ctx.fill();           // Remplissage du dernier chemin tracé

// Coque du bâteau
ctx.beginPath();      // Début d'un autre chemin
ctx.moveTo(50,250);
ctx.lineTo(100,300);
ctx.lineTo(250,300);
ctx.lineTo(300,250);
ctx.fillStyle = "peru";
ctx.strokeStyle = "sienna"; // Définition de la couleur de contour
ctx.lineWidth = 5;         // Définition de la largeur de ligne
ctx.fill();            // Application du remplissage
ctx.stroke();          // Application du contour

// Mât
ctx.beginPath();
ctx.moveTo(140,50);
ctx.lineTo(140,250);
ctx.lineWidth = 10;
ctx.stroke();

Le tracé de ces 3 formes avec des contours et remplissages variés produit un simple bateau.

Canvas remplissage et contours
(Ceci est une capture d'écran PNG de la démonstration)

Démonstration

Styles de ligne

Outre la propriété lineWidth évoquée précédemment pour la largeur de ligne, existent lineCap pour le style de fin de ligne :

  • round : pour faire un arrondi au dela du bout du tracé,
  • butt : tracé "coupé" carré,
  • square : style carré (dépasse du point d'arrivée)

Canvas Linecap

Et lineJoin pour la jointure :

  • bevel : biseauté
  • round : arrondi
  • mitter : ralonge les tracés jusqu'à ce qu'il se rejoigne entièrement pour faire un angle
ctx.lineJoin = "round";
ctx.lineCap = "round";

En applicant ces deux nouvelles propriétés à la précédente démonstration, les contours et fins de lignes sont arrondis.

Démonstration

Commentaires

Didodu258 a dit le

Très bon tutoriel.
J'ai une remarque pour ceux qui voudrait essayer le programme de la section "Retouche des pixels" dans le chapitre "Jouer avec les Pixels".

Il semblerait que la plupart des navigateurs modernes n'exécutent pas la ligne contenant le getImageData pour des mesures de sécurité (quelques informations disponibles ici : goo.gl/p64w8 mais ça reste encore flou pour moi).

J'ai trouvé une solution sur le site stackoverflow.com pour ceux qui n'aurait pas d'hébergement et qui désirerait quand même utiliser ce code : il faut exécuter le script dans un serveur local (localhost). Personnellement j'ai utilisé wampserver et ça fonctionne parfaitement.

À part faire comme ça je n'ai pas trouvé d'autres solutions, si quelqu'un pouvait en dire plus...
(et si on pouvait ne pas supprimer mon commentaire...)

dew a dit le

C'est en effet une restriction de sécurité : il faut utiliser les ressources du domaine qui héberge déjà la page (afin de ne pas extraire les informations d'un domaine tiers). Donc localhost peut fonctionner pour les tests (plutôt qu'une adresse IP, ou un accès via file:// qui ne permet pas d'appliquer une règle de sécurité propre à un domaine).