Attention : les transformations affectent le canevas en soi et donc toutes les figures qu’on va pouvoir dessiner après que ces transformations aient été effectuées vont être dessinées dans un canevas transformé.
Effectuer une translation du canevas
Une translation est un déplacement effectué en fonction d’un vecteur. Un vecteur est caractérisé par une longueur et une direction.
Une translation du canevas est donc un déplacement de celui-ci d’une certaine distance et dans une certaine direction. Pour être tout à fait précis, c’est le point d’origine du canevas (l’angle supérieur gauche) qui va être déplacé.
Pour effectuer une translation du canevas, on va utiliser la méthode translate(). Cette méthode prend deux arguments qui correspondent à deux distances. Le premier argument indique le déplacement horizontal du point d’origine tandis que le second indique le déplacement vertical du point d’origine.
See the Pen
Cours JavaScript 15.7.1 by Pierre (@pierregiraud)
on CodePen.
Effectuer une rotation du canevas
Pour effectuer une rotation de notre canevas, on va utiliser la méthode rotate(). On va lui passer un angle exprimé en radians en argument qui va servir à indiquer le degré de rotation du canevas.
Cette méthode va tourner notre canevas dans le sens des aiguilles d’une montre à partir d’un point d’origine qui est par défaut le coin supérieur gauche du canevas.
See the Pen
Cours JavaScript 15.7.2 by Pierre (@pierregiraud)
on CodePen.
Pour modifier le point d’origine de notre canevas entre deux rotations, on va pouvoir utiliser la méthode translate(). En combinant rotate() et translate(), on va pouvoir créer certaines figures intéressantes.
See the Pen
Cours JavaScript 15.7.3 by Pierre (@pierregiraud)
on CodePen.
Enregistrer l’état courant du canevas et restaurer un état précédent
Les transformations présentées dans cette leçon s’effectuent sur le canevas en soi, ce qui signifie que toutes les figures dessinées par la suite dans ce même canevas vont l’être dans un canevas transformé et vont donc apparaitre « comme si » elles étaient elles-mêmes tournées ou déplacées.
Parfois, on ne voudra dessiner que certaines figures dans un canevas transformé puis annuler la transformation de ce canevas pour en dessiner d’autres ou entre transformer le canevas d’une autre façon pour en dessiner d’autres.
Pour nous aider à faire cela, on va pouvoir utiliser deux méthodes très pratiques : les méthodes save() et restore().
La méthode save() va nous permettre de sauvegarder l’état d’un canevas à un certain moment. La méthode restore() va nous permettre de retourner à cet état après avoir effectué une transformation (on retournera au dernier état sauvegardé avec save()).
See the Pen
Cours JavaScript 15.7.4 by Pierre (@pierregiraud)
on CodePen.
Ici, on sauvegarde l’état de notre canevas juste après l’utilisation de translate() et avant d’utiliser rotate(). On dessine un premier carré (bleu) sans rotation, puis on effectue une première rotation de 90° (PI/2) et on dessine un deuxième carré (vert), puis on effectue une deuxième rotation de 90° et on dessine un troisième carré (rouge).
On restore ensuite l’état de notre canevas avant de dessiner notre dernier carré. Comme on a utilisé save() avant un quelconque rotate(), le canevas est restauré à un état sans aucune rotation. On effectue une rotation de 90° et on dessine un dernier carré. Ce carré va venir se placer par-dessus le carré vert précédemment dessiné
Effectuer des transformations complètes du canvas
Pour appliquer plusieurs transformations d’un coup à notre canevas, on peut également utiliser la méthode transform(). Cette méthode va nous permettre de modifier l’échelle d’un canevas, de le tordre et d’effectuer des translations sur celui-ci.
La méthode transform prend 6 arguments :
- Une mise à l’échelle dans le plan horizontal ;
- Une torsion dans le plan horizontal ;
- Une torsion dans le plan vertical ;
- Une mise à l’échelle dans le plan vertical ;
- Un déplacement horizontal ;
- Un déplacement vertical.
See the Pen
Cours JavaScript 15.7.5 by Pierre (@pierregiraud)
on CodePen.
Dans le cas où on souhaite dessiner plusieurs figures dans un canevas, il est possible que l’on souhaite à un moment ou à un autre annuler les transformations effectuées sur ce canevas. On va pouvoir faire cela avec la méthode resetTransform() qui va tout simplement annuler toute transformation effectuée dans le canevas.
Pour annuler une transformation et en redéfinir immédiatement une nouvelle, on va pouvoir utiliser la méthode setTransform() qui va prendre les mêmes arguments que transform().
See the Pen
Cours JavaScript 15.7.6 by Pierre (@pierregiraud)
on CodePen.
