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.
Ainsi un carré peut devenir un losange ...

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

Le code de la page (extraits)

<body> ... <canvas width = '400' height ='400'></canvas> <script> ... 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

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

On retrouve l'instruction contexte.save() pour sauvegarder l'état initial (avant rotation).
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é qui compte tenu de la rotation apparaît 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é !
Retour menu