Programmation Web Avancée

Blogue

Les cours

Exemple de rotation d'une forme en canvas


Rédigé par , le
Voici un exemple simple qui permet de mieux comprendre (j'espère!) comment faire une rotation en utilisant JavaScript sur une balise canvas.
<!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
(facultatif)
(facultatif et non divulgé)
Captcha image
Prenez le nombre affiché et faites moins 1.
 
Blog  

Les articles


Pour envoyer une demande d'assistance à l'enseignant, cliquez ici