Accueil

Tutoriel Canvas - sommaire

Vous pouvez me contacter via Facebook (questions, critiques constructives) : page facebook relative à mon site

Canvas : dessiner des droites et des polygones

Dessiner des droites

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()  ; 
...

Attention cette page comprend deux éléments "canvas". Il convient donc d'être rigoureux au niveau des script.
Une variable objet pour chaque canevas.

La propriété lineCap permet de définir le style des extrémités de chaque ligne. Les différentes valeurs de cette propriété sont : round (ajout d'un demi cercle à chaque extrémité) , butt(valeur par défaut), square (ajout d'un carré à chaque extrémité).

Canvas : dessiner des polygones

Exemple

Votre navigateur est obsolète

Le code correspondant

Instruction HTML :

<canvas width ='300' 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 contexte = canevas2.getContext('2d');
var X = canevas2.width ; 		var Y = canevas2.height; 
contexte.lineWidth = 14 ; // épaisseur du contour dans les deux formes
// première forme : triangle
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(); // dessiner contour de la forme 
		
contexte.beginPath();	
//nouvelle forme : un quadrilatère 
contexte.moveTo(100,50); 
contexte.lineTo(250,50); 
contexte.lineTo(200, 250); 
contexte.lineTo(50,250);
		
contexte.strokeStyle ='green'; 
contexte.lineJoin = 'round'; 
contexte.stroke()  ; // dessiner contour de la forme		
...

Le deuxième élément "canvas" n'ayant pas d'ID, je suis obligé d'utiliser 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. Mais pour chaque polygone il y a une instruction moveTo et plusieurs instructions lineTo !

Remarquez que pour dessiner un triangle il n'y a que deux instructions lineTO et que pour dessiner un quadrilatère il n'y a que trois instructions lineTO.
La méthode closePath relie le dernier et le premier point !

Donc si vous souhaitez une forme ouverte il ne faut surtout pas d'instruction contexte.closePath !
C'est ce que j'ai fait pour le quadrilatère.

La propriété lineJoin permet de définir le style des angles la forme. Les différentes valeurs de cette propriété sont : round(angles arrondis), miter(valeur par défaut), bevel (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 vient d'être notablement améliorée. Il est possible désormais de dessiner une forme complexe en une seule instruction ! Mais je n'en dis pas plus. Visitez la page "Le constructeur de formes Path2D" dans ce tuto !