Tutoriel Canvas - sommaire

Canvas : dessiner des droites et des polygones

Dans ce chapitre je vais vous montrer comment dessiner des segments et des polygones ouverts ou fermés.

Dessiner des segments

Exemple

On a dessiné deux croix. La première est verte et chaque ligne a une largeur de 10px. La deuxième est rouge et chaque ligne a une largeur de 16px ; Dans la deuxième croix les extrémités de chaque ligne sont arrondies.

Le code correspondant

La zone de dessin fait 320 par 200

Le script : ... var canevas = document.querySelector('canvas'); // canevas référence le premier élément "canvas" de la page var contexte = canevas.getContext('2d'); // définir première croix contexte.lineWidth = 10 ; contexte.strokeStyle ='green'; contexte.moveTo(30, 30); contexte.lineTo(170, 170); contexte.moveTo(170,30); contexte.lineTo(30,170); // dessiner la première croix contexte.stroke() ; // définir deuxième croix contexte.beginPath(); contexte.lineWidth = 16 ; contexte.strokeStyle ='red'; contexte.lineCap ='round' ; contexte.moveTo(230, 30); contexte.lineTo(300, 170); contexte.moveTo(300,30); contexte.lineTo(230,170); // dessiner la croix contexte.stroke() ; ...

On utilise les méthodes moveTo(x,y) et lineTo(x,y) pour définir une ligne :
• dans moveTo les paramètres x et y indiquent les coordonnées du point de départ de la ligne
• dans lineTo les paramètres x et y indiquent les coordonnées du point d'arrivée de chaque ligne

La propriété lineCap permet de définir le style des extrémités de chaque segment.

Les différentes valeurs de cette propriété :
• round : ajout d'un demi-cercle à chaque extrémité
• butt : aucun ajout (valeur par défaut)
• square : ajout d'un carré à chaque extrémité

Canvas : dessiner des polygones

Attention cette page comprend donc deux éléments "canvas". Il convient donc d'être rigoureux quant aux noms des variables. Pour chaque canevas : une variable qui référence cette zone de dessin et une variable qui référence son contexte 2D.
Nous verrons plus tard qu'il y a une solution plus élégante : une fonction spécifique à chaque canevas et donc des variables locales ...

Exemple

Dans le canevas ci-dessus il y a deux polygones:
• un triangle fermé avec des angles biseautés
• un quadrilatère ouvert avec des sommets arrondis

Le code correspondant

Instruction HTML : <canvas width ='400' height ='300' > <p>Votre navigateur est obsolète</p></canvas>

Le script : ... var canevas2 = document.querySelectorAll('canvas')[1]; // canevas2 référence le deuxième canevas de la page var contexte2 = canevas2.getContext('2d'); var X = canevas2.width ; var Y = canevas2.height; contexte2.lineWidth = 14 ; // épaisseur du contour dans les deux formes // première forme : triangle fermé contexte2.moveTo(20, Y-20); contexte2.lineTo(X/2, 20); contexte2.lineTo(X-20,Y-20); contexte2.closePath() ; // fermer la forme contexte2.strokeStyle ='red'; contexte2.lineJoin = 'bevel'; contexte2.stroke(); // dessiner contour de la forme contexte2.beginPath(); //nouvelle forme : un quadrilatère ouvert contexte2.moveTo(100,50); contexte2.lineTo(250,50); contexte2.lineTo(200, 250); contexte2.lineTo(50,250); contexte2.strokeStyle ='green'; contexte2.lineJoin = 'round'; contexte2.stroke() ; // dessiner contour de la forme ...

Le deuxième élément "canvas" n'ayant pas l'attribut ID donc je dois utilisr document.querySelectorAll('canvas')[1] pour le référencer.

On utilise les méthodes moveTo(x,y) et lineTo(x,y) pour dessiner des polygones.

Remarquez que pour dessiner un triangle fermé il n'y a que deux instructions lineTo() et une instruction closePath().
Pour dessiner un quadrilatère fermé il ne faut donc que trois instructions lineTo() et une instruction closePath().

La méthode closePath() ferme le chemin.
Donc si vous souhaitez une forme ouverte il ne faut surtout pas d'instruction closePath().

La propriété lineJoin permet de définir le style des sommets du polygone.

Les différentes valeurs de cette propriété :
• round : sommet arrondi
• miter : sommet pointu (valeur par défaut)
• bevel : sommet biseauté

Il n'y a pas plus simple ???

Vous devez vous dire que c'est beaucoup de code pour dessiner de simples polygones.
Rassurez vous. L'API Canvas s'améliore ; il est possible désormais de dessiner une forme complexe en une seule instruction ! Mais je n'en dis pas plus pour l'instant. Dans mon tuto il y a tout un chapitre consacrée au constructeur Path2D().

Lignes pointillées

La méthode setLineDash() définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux.

Ci-dessous dans un Iframe un document HTML contenant un canevas.

Le premier polygone est fermé mais surtout il est borduré de lignes pointillées.
Le deuxième polygone est ouvert et borduré de lignes continues.

Le script correspondant

ctx.setLineDash([10,10]) : tirets et espaces ont la même longueur.
ctx.setLineDash([]) : annulation de lignes pointillées ; retour aux lignes continues