Opérations
La méthode save() a pour fonction de sauvegarder l'état graphique du canvas, c'est-à-dire les informations concernant les styles appliqués au canvas. Ces informations sont fillStyle, strokeStyle,lineWidth, lineCap, lineJoin ainsi que translate() et rotate(), que nous allons découvrir plus bas.
À chaque appel de la méthode save(), l'état graphique courant est sauvegardé dans une pile. Pour restaurer l'état précédent, il faut utiliser restore().
La translation permet de déplacer le repaire d'axes du canvas. L'idée est de placer le point (0,0) à l'endroit où l'on souhaite dessiner une forme. De cette manière, on dessine la forme sans se soucier des calculs de son emplacement, ce qui peut se révéler utile quand on insère des formes complexes. Une fois que les formes sont dessinées, on replace les axes à leur point d'origine. Et, bonne nouvelle, save() et restore()prennent en compte les translations !
Les translations se font avec la méthode translate(x, y). x est l'importance du déplacement sur l'axe des abscisses et y sur l'axe des ordonnées : les valeurs peuvent donc être négatives.
context.save(); context.translate(40, 40);
context.fillStyle = "teal"; context.fillRect(0, 0, 50, 50); context.restore();
context.fillStyle = "orange"; context.fillRect(0, 0, 50, 50); |
La translation permet de déplacer le repaire d'axes du canvas
On commence par sauvegarder l'état du canvas. Ensuite, on déplace l'origine des axes au point (40,40) et on y dessine un carré bleu-gris. Dès que c'est fait, on restaure l'état, ce qui a pour conséquence de replacer l'origine des axes au point (0,0) du canvas. Là, on dessine le carré orange. Grâce à la translation, on a pu laisser (0,0) comme coordonnées de fillRect() !
Les rotations permettent d'appliquer une rotation aux axes du canvas. Le canvas tourne autour de son point d'origine (0,0). La méthode rotate() reçoit un seul paramètre : l'angle de rotation spécifié en radians. Il est possible de combiner une rotation et une translation, comme le montre l'exemple suivant :
context.translate(75,75);
context.fillStyle = "teal"; context.rotate((Math.PI / 180) * 45); context.fillRect(0, 0, 50, 50);
context.fillStyle = "orange"; context.rotate(Math.PI / 2); context.fillRect(0, 0, 50, 50);
context.fillStyle = "teal"; context.rotate(Math.PI / 2); context.fillRect(0, 0, 50, 50);
context.fillStyle = "orange"; context.rotate(Math.PI / 2); context.fillRect(0, 0, 50, 50); |
Il est possible de combiner une rotation et une translation
On place l'origine des axes au centre du canvas avec translate(). On opère une première rotation de 45 degrés et on dessine un carré bleu-gris. Ensuite, on fait une deuxième rotation de 90 degrés et on dessine un carré orange. On continue de tourner les axes de 90 degrés et on dessine un nouveau carré bleu-gris. On fait une dernière rotation et on dessine un carré orange.
Créé avec HelpNDoc Personal Edition: Générateur facile de livres électroniques et documentation