Dessiner des rectangles avec Canvas

Ce sont en fait des carrés ! Mais un carré c'est une forme particulière de rectangle ... hauteur = largeur.

Dans le premier canevas on dessine des carrés pleins et dans le deuxième canevas des contours de carrés.

Le code CSS et HTML

... <style> canvas {display : block ; margin : 5px auto 5px auto ; border : 1px solid black ; } </style> </head> <body> ... <canvas width = '300' height = '300' id ='canevas1'>Votre navigateur est obsolète</canvas> <canvas width = '300' height = '300' id ='canevas2'>Votre navigateur est obsolète</canvas>

Un peu de CSS

Une règle de style concerne la balise CANVAS afin que chaque boîte CANVAS soit centrée horizontalement dans la page.
La balise canvas n'est pas nativement de type block. Donc il faut appliquer display:block avant margin:auto au sélecteur canvas.

Le code HTML

Pour chaque balise CANVAS on précise la taille du canevas (en pixels) et on attribue à chaque zone de dessin un identifiant.
Dans chaque balise CANVAS un message s'affichera si le navigateurs ne sait pas interpréter le Canvas (par exemple IE8)

Le script

Le script comprend deux parties : La première partie permet de remplir le premier canevas et la deuxième partie permet de remplir le deuxième canevas.

Le script pour dessiner dans le premier canevas

	//première partie du script
		var canvas = document.querySelector('#canevas1'); 
		var contexte = canvas.getContext('2d');
		contexte.fillStyle = "rgba(255,0,0,0.5)" ; 
		contexte.fillRect(20,20,100,100); 
		contexte.fillRect(40,40,100,100); 
		contexte.fillRect(60,60,100,100); 
		contexte.fillRect(80,80,100,100); 
		contexte.fillRect(100,100,100,100); 		
		contexte.fillRect(120,120,100,100); 	
		contexte.fillRect(140,140,100,100); 	
		contexte.fillRect(160,160,100,100); 	
		contexte.fillRect(180,180,100,100); 	

Il est prévu que dans le futur que l'on puisse dessiner en 3D avec Canvas ... mais pour l'instant il n'y a que le contexte 2D.
Je vous rappelle que la méthode querySelector de l'objet document remplace avantageusement l'ancienne méthode getElementById. Voir le tutoriel JS pour avoir plus d'explications sur les nouvelles méthodes en JavaScript de référencement des noeuds du DOM.

On définit d'abord la couleur de remplissage avec la propriété fillStyle. Notez que la couleur est exprimée avec la notation RGBA (voir tutoriel CSS3).
Puis on appelle 9 fois la méthode fillRect(x ,y ,largeur ,hauteur) pour dessiner 9 rectangles pleins.

Le script pour dessiner dans le deuxième canevas

	//deuxième partie du script
		var canvas = document.querySelector('#canevas2'); 
		var contexte = canvas.getContext('2d');
		contexte.strokeStyle = "rgb(255,0,0)" ; 
		contexte.lineWidth = '5'; 
		for (i=1; i<=9; i++)
		{
			contexte.translate(20,20) ; // déplacement origine pour rectangle suivant
			contexte.strokeRect(0,0,100,100) ; 
		} // fin for 

On définit d'abord un style et une épaisseur de contour respectivement avec les propriétés strokeStyle et lineWidth.
Puis une boucle est exécutée 9 fois. Lors de chaque passage dans la boucle il y a un changement d'origine avec la méthode translate(offset x, offset y) puis on dessine le contour d'un rectangle avec la méthode strokeRect(x,y,largeur,hauteur).

Syntaxe

Dans le code Canvas l'unité de mesure n'est pas précisée ; c'est toujours le pixel !

Dans les méthodes fillRect et strokeRect les paramètres x et y représentent les coordonnées de l'arête supérieure gauche du rectangle.

Attention à la casse dans l'écriture des propriétés et méthodes ; respectez la règle JavaScript concernant la casse : la première lettre de chaque mot en majuscule mais seulement à partir du deuxième mot.
Retour menu