Transformation du canevas - changement d'échelle

Le script (extraits)

Le canevas fait toujours 400 par 400 quelque soit la taille de l'écran (page non "responsive").

		...
		contexte.fillStyle ='red'; 
		contexte.fillRect(0,0,100,100);
		contexte.save(); //sauvegarde état initial canevas
		contexte.scale(2,2);
		contexte.fillStyle ='green'; 
		contexte.fillRect(100,100,100,100);
		contexte.restore(); //restauration état intial canevas
		contexte.fillStyle ='yellow';
		contexte.fillRect(100,100,50,50);
	

Commentaire du script

On dessine un premier carré rouge de 100 par 100 dans le coin haut gauche du canevas.

On sauvegarde cet état du canevas : canevas.save()

On applique au canevas un changement d'échelle pour les deux axes : contexte.scale(2,2)

On dessine un carré vert (fillRect(100,100,100,100) mais comme l'échelle a été doublée pour les deux axes ce carré a son arête supérieure gauche au point 200,200 (et non pas 100,100) et des côtés de 200 (et non pas 100).

contexte.restore() : restauration de l'état initial sauvegardé donc annulation du changement d'échelle.
fillRect(100,100,50,50) : le carré jaune fait bien 50 par 50 et est bien positionné par rapport au point 100,100.

Donc grâce à cette page nous avons vu trois nouvelles méthodes : scale(),save() et restore().
Retour menu