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

Le canevas fait 320 par 200 et est identifié "canevas1"

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

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

Le canevas fait 400 par 300 et est identifié "canevas2".

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

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 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 de ce document HTML

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