Tutoriel Canvas - sommaire

Canvas : dessiner des droites et des polygones

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

Remarque préalable

Extrait de la feuille de style interne de cette page web :

	.toile{width : 60% ; height : auto; }

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 balise canvas définit un repère de 320 par 200, est identifiée "canevas1" et bénéficie de la classe 'toile'.

La fonction JS

function fcanevas1()
{
	var canevas = document.getElementById('canevas1'); 
	var contexte = canevas.getContext('2d');
	// 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); 
	contexte.stroke()  ; 
		
	// 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); 
	contexte.stroke()  ; 
}
fcanevas1();		

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é sont :
• 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

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

La balise canvas définit un repère de 400 par 300, est identifiée "canevas2" et est stylée par la classe "toile".

La fonction JS

function fcanevas2()
{
	var canevas = document.getElementById('canevas2');
	var contexte = canevas2.getContext('2d');
	var X = canevas.width ; 		
	var Y = canevas.height; 
	contexte.lineWidth = 14 ; 
		// triangle fermé
	contexte.moveTo(20, Y-20); 	
	contexte.lineTo(X/2, 20); 		
	contexte.lineTo(X-20,Y-20);
	contexte.closePath() ; 	// fermer la forme
	contexte.strokeStyle ='red'; 
	contexte.lineJoin = 'bevel'; 
	contexte.stroke(); 
		
	// quadrilatère ouvert
	contexte.beginPath();	
	contexte.moveTo(100,50); 
	contexte.lineTo(250,50); 
	contexte.lineTo(200, 250); 
	contexte.lineTo(50,250);
	contexte.strokeStyle ='green'; 
	contexte.lineJoin = 'round'; 
	contexte.stroke()  ; 
}
fcanevas2();		

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é sont :
• 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 ...

Si vous avez déjà des notions sur l'API Canvas mais que la méthode path2D() vous est encore inconnue, vous pouvez aller directement au chapitre en lien : le constructeur path2D()

Lignes pointillées

Exemple

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.

La méthode setLineDash()

Cette méthode 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.

Le script

La balise canvas définit un repère de 600 par 400, est identifiée "canevas3" et est stylée par la classe 'toile'.
Donc le script qui en découle :

var canevas = document.getElementById('canevas');
var ctx = canevas.getContext('2d');
ctx.lineWidth =3;
ctx.strokeStyle ="red"; 

// lignes pointillées
ctx.setLineDash([10,10]);
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(100, 50);
ctx.lineTo(200,150); 
ctx.closePath();
ctx.stroke();

// lignes continues
ctx.setLineDash([]);
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(300, 300);
ctx.lineTo(200,400); 
ctx.stroke();

Syntaxe

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