<!DOCTYPE html> <html> <head> <title>Rotation d'un canvas</title> <meta charset="utf-8"> </head> <body> <canvas id="canvas" width="200" height="200"></canvas> <script> var ctx = document.getElementById("canvas").getContext("2d"); ctx.fillStyle = "blue"; ctx.save(); // sauvegarder l'état actuel du contexte ctx.translate(50, 50); // déplacer l'origine à 50,50 ctx.rotate(Math.PI/4); // faire une rotation de 45 degrés ctx.fillRect(-25, -25, 50, 50); // dessiner un carré au point d'origine ctx.restore(); // restaurer le contexte au dernier état sauvegardé </script> </body> </html>
Résultat :
Pour A. Trépanier (H2015)
Ajouter votre commentaire