Transformation du canevas - rotation

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 script

Pour le script le canevas fait 400 par 400 (valeurs des attributs width & height).

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

Commentaire

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.

Conclusion

Donc maintenant vous savez comment dessiner simplement un losange dans un canevas :

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.
Je l'ai trouvé sur le site "developer.mozilla.org".
Je me suis contenté de rendre l'animation adaptative.
Par respect pour l'auteur je vous communique ci-dessous le lien vers ma source : Un système terrestre animé
Retour menu