Canvas : constructeur Path2D

Remarquez que jusqu'à maintenant les méthodes fill() et stroke() n'avaient pas d'argument ...

Bonne nouvelle : la dernière version de l'API Canvas introduit un constructeur d'objets : Path2D().
Désormais et grâce à ce constructeur il suffit de définir une forme (position et dimensions) via ce constructeur
Puis vous pouvez dessiner N fois cette forme via les méthodes fill() et/ou stroke() avec en argmument la variable qui référence l'objet.

Premier exemple

Cliquez une fois puis une deuxième fois dans le canevas ; les formes passent successivement à rouge puis à bleu.
Actualisez la page pour revenir à la couleur initiale (noir).

Le script correspondant

	var canevas = document.querySelector('canvas'); 
	// variable canevas référence le premier canevas de la page
	var contexte = canevas.getContext('2d');
	X = canevas.width ;
	Y = canevas.height;
	// créer un premier objet graphique : un rectangle
    var rectangle1 = new Path2D();
    rectangle1.rect(110, 110, 50, 50);
	// créer un deuxième objet graphique : un cercle
    var cercle1 = new Path2D();
    cercle1.arc(100,35, 25, 0, 2 * Math.PI);
	// dessiner ces objets en noir (couleur par défaut)
    contexte.stroke(rectangle1);
    contexte.fill(cercle1);
	var couleur ="red"; // changer couleur
	canevas.onclick = function()
		{ 
			contexte.fillStyle =couleur;
			contexte.strokeStyle =couleur;
			contexte.clearRect(0,0,X,Y);
			// redessiner en rouge puis en bleu
			contexte.stroke(rectangle1);
			contexte.fill(cercle1); 
			couleur ="navy"; // changer couleur
		} 

Commentaire

Grâce au constructeurs d'objets Path2D() on définit deux formes graphiques (un rectangle et un cercle) référencées respectivement par les variables rectangle1, cercle1.
Ces formes sont dessinées trois fois mais avec des couleurs différentes (noire puis rouge puis bleu) tout simplement en paramétrant les méthodes stroke() et/ou fill() avec "rectangle1" ou "cercle1".
Nous avons donc un script beaucoup plus succinct si on utilise le constructeur Path2D().

Utiliser la syntaxe SVG

Deuxième bonne nouvelle : avec le constructeur Path2D() on peut utiliser la syntaxe SVG pour définir le chemin. Donc une seule instruction suffit pour définir une forme complexe.

Exemple ci-dessous

Dans le deuxième canevas ci-dessus il y a quatre formes colorées en noir.
Cliquez dans le canevas pour que les formes deviennent orangées.

Le script correspondant

	var canevas2 = document.querySelectorAll('canvas')[1]; // sélection deuxième canevas
	var contexte2 = canevas2.getContext('2d');
	X2 = canevas2.width ; 	Y2 = canevas2.height;
		
	var triangle2 = new Path2D('M10 10 L200 100 L200 200 Z');
	contexte2.fill(triangle2);
		
	var rectangle2 = new Path2D( "M250 150 H400 V200 H250 Z");
	contexte2.fill(rectangle2);
		
	var toit_usine2 = new Path2D('M10 250 l20 -20 l20 20 l20 -20 l20 20 l 20 -20 
		l 20 20 l 20 -20 l20 20');
	contexte2.stroke(toit_usine2);
		
	var carre2 = new Path2D('M10 300 h 80 v 80 h -80 z');
	contexte2.fill(carre2);
	
	var couleur2 = "orange"; 
	canevas2.onclick = function()
		{ 
			contexte2.fillStyle =couleur2;
			contexte2.strokeStyle =couleur2;
			contexte2.clearRect(0,0,X,Y);
			contexte2.fill(triangle2);
			contexte2.fill(rectangle2);
			contexte2.stroke(toit_usine2);
			contexte2.fill(carre2);
		} 

Notez que le script est très succinct grâce à l'emploi du constructeur Path2D ! Chaque objet Path2D est défini avec une seule instruction grâce à la notation SVG des chemins !

Les deux premiers chemins sont notés en absolu (les lettres L,H,V sont en majuscules).
Les deux derniers chemins sont notés en relatif (les lettres l,h,v sont en minuscules).
Notez que l'on remplit toutes les formes sauf le toit d'usine : contour.

Si vous ne comprenez rien à cette syntaxe concernant les chemins vous devez visiter, dans le même site, le tutoriel "dessiner avec SVG" et plus précisément les pages "La balise Path" et "les chemins : notation en relatif" : dessiner à SVG

Restrictions

Attention dans la notation d'un trajet selon la syntaxe SVG les abscisses et ordonnées ne peuvent pas faire référence à des variables !
Donc si vous voulez définir un chemin en fonction de X et Y (largeur et hauteur du canevas) il faut utiliser les méthodes traditionnelles de Canvas(qui elles peuvent être paramétrées avec des variables).

Atelier

Essayez de reconstituer le code correspondant à cette belle balustrade classique.

Pour vous aider je vous donne quelques bribes du script :

...	
	var colonne = new Path2D("M 0,20 h120 v30 h-20 c-30,60 50,140 0,200 h20 v40 h-120 
		v-40 h20 c-50,-60 30,-140 0,-200 h-20 v-30 z");
	contexte3.fillStyle ="gray";
	contexte3.fillRect(0,0, canevas3.width, canevas3.height);
	contexte3.fillStyle ="yellow";
	contexte3.globalAlpha ="0.5";
	for (i=0; i<=7; i++)
		{
			contexte3.fill(colonne);
			contexte3.translate(120,0) ; // déplacement colonne suivante
		} // fin for 
...

J'utilise le constructeur path2D() pour définir une forme très complexe (avec des courbes de Bézier) pour définir une colonne de la balustrade.
J'utilise la syntaxe SVG pour définir le chemin avec notation en relatif.
Il faut dupliquer cette forme 8 fois. Il faut donc une boucle exécutée 8 avec dessin de l'objet "colonne" puis translation sur l'axe X.

Retour menu