Accueil
Mes tutoriels sur la programmation

Tutoriel Canvas - sommaire


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

Canvas : les transformations

Translation et transparence de formes

Exemple

Sept carrés de couleurs différentes mais avec la même transparence.
Chaque carré décalé par rapport au précédent de quelques pixels.

Affichez la console !

Le code HTML :

<canvas style ="width : 60% ; height :auto;"></canvas>

Révision : quelles sont les dimensions de ce canevas ?

Le script (extrait) :

		canevas = ...
		// il faut référence le premier canevas de la page
		contexte = canevas.getContext('2d');
		var X=canevas.width;
		var Y=canevas.height;
		console.log(X); 
		console.log(Y); 
		var delta = 20; 
		var cote = 50;
		var rouge = 255; var vert = 0; var bleu = 0; 
		var couleur;;
		contexte.globalAlpha = 0.5; // 50% opacité pour tous les tracés futurs
		for (i=1; i <=7; i++)
		{
			rouge-=30 ; vert+=30; bleu+=30;
			couleur = "rgb("+ rouge+","+vert+","+bleu+")" ; 
			contexte.fillStyle = couleur ;
			contexte.fillRect(0,0,cote,cote) ; 
			contexte.translate(delta,delta) ; // déplacement origine pour rectangle suivant
		} // fin for 
		...
	

Examinons maintenant plus en détail certains instructions du script !

var rouge = 255; var vert = 0; var bleu = 0; : le code RGB initial est rouge (mais à demi opaque puisque : contexte.globalAlpha = 0.5;)

Changement d'échelle

Exemple

Le code correspondant

Le canevas 'responsive' fait 400 par 400

Le script (extrait) :

		canevas2 = ...
		contexte = canevas2.getContext('2d');
		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

Il faut référencer le deuxième canevas de la page ...

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

Rotation de formes

Nous avons vu que nous pouvons changer le point d'origine, changer l'échelle du contexte.
On peut aussi changer l'orientation du contexte ou en d'autres termes effectuer une rotation des axes.

Principes

La méthode rotate() est argumentée par un angle exprimé en radians !
Cette méthode fait pivoter les axes X et Y du repère dans le sens des aiguilles d'une montre autour du point d'origine.
Observez le schéma ci-dessous qui est plus explicatif qu'un long discours.

Ainsi si vous dessinez un carré après une rotation de 45° des axes il apparaitra en fait tel un losange !

Exemple

Trois formes dans le canevas ci-dessus : un carré rouge puis un losange jaune et enfin un carré vert !

Le code correspondant

Le canevas 'responsive' fait 400 par 400.

Le script (extrait) :

		canevas3 = ...
		contexte = canevas3.getContext('2d');
		contexte.fillStyle ='red'; 
		contexte.fillRect(0,0,100,100);
		contexte.save(); // sauvegarde de l'état initial
		contexte.rotate(Math.PI/180 *45); // rotation du canevas de 45° 
		contexte.fillStyle ='yellow'; 
		contexte.fillRect(200,0,100,100);
		contexte.restore(); // restauration état initial donc annulation rotation
		contexte.fillStyle ='green'; 
		contexte.fillRect(300,100,100,100);
	

Il faut référence le troisième canevas de la page.

On retrouve l'instruction contexte.save() pour sauvegarder l'état initial (avant rotation de l'axe).
Cette instruction est indispensable si une restauration est envisagée. En effet seul un état sauvegardé peut être restauré.

contexte.rotate(Math.PI/180 *45): orientation du canevas de 45°.
Vous trouvez sans doute cette formule un peu compliquée ...
Mais il n'est pas possible d'écrire directement rotate(45) car Canvas utilise comme unité d'angle le radian (et non pas le degré). Mais vous savez que Math.PI (radians) équivaut à un angle plat (ou 180 degrés).
Donc l'équivalent en radians de 45° est égal à : Math.PI/180 *45

On dessine ensuite un carré (rectangle avec largeur = hauteur) qui compte tenu de la rotation apparait tel un losange.

contexte.restore() : on restaure l'état précédent donc on annule la rotation du contexte.

La troisième forme qui est remplie de vert apparaît bien comme un carré puisque la rotation des axes a été annulée.

Une superbe animation basée sur des rotations

Je vous le dis d'avance : je ne suis pas l'auteur de cette animation. Je ne voudrais pas que l'on m'accuse de plagiat.
Cette animation, je l'ai trouvée sur le site "developer.mozilla.org".
Je me suis contenté de rendre le canevas adaptatif.
Par respect pour l'auteur je vous communique ci-dessous le lien vers la page où vous retrouverez le code et des explications. Un système terrestre animé