Dessiner avec Javascript et la balise canvas

Auteur: Mohamed CHINY Durée necessaire pour le cours de Dessiner avec Javascript et la balise canvas Niveau recommandé pour le cours de Dessiner avec Javascript et la balise canvas Supports vidéo non disponibles pour ce cours Exercices de renforcement non disponibles pour ce cours Quiz non disponibles pour ce cours

Page 6: Animer les dessins sur un canvas

Toutes les pages

Dessiner avec Javascript et la balise canvas

Créer des animations sur le canvas

Principe de l'animation

Une animation est une séquence d'images qui défilent à une certaine vitesse (24 image par secondes par exemple). Pour faire animer un canvas alors il suffit de reproduire les dessins à une certaine vitesse tout en changeant légèrement leur apparence (position, couleur, taille...) d'une image à une autre.

Pour effacer l'objet de la séquence précédente pour le remplacer par un nouveau, il suffit de le couvrir par un rectangle qui a la même couleur que le fond par exemple. Ce travail sera répété à chaque fois et on aura donc une fonction qui sera appelée périodiquement soit par la méthode setInterval() ou la méthode setTimeout(). Dans ce dernier cas, la fonction sera récursive.

Exemple d'animation: boude de billard

Dans l'exemple suivant nous allons voir un exemple d'animation qui illustre une boule de billard qui se percute contre les parois de la table et fait des rebonds.

Code source:
<html>
   <head>
      <style>
         body{
            text-align:center;
         }
         canvas{
            border-top:solid 4px #EEE;
            border-right:solid 4px #EEE;
            margin:auto;
            margin-top:50px;
            display:block;
            margin-bottom:40px;
         }
      </style>
      <script>
         x=0;
         y=0;
         window.onload=function(){
            can=document.getElementById("can");
            cont=can.getContext("2d");
            cont.fillStyle="#E70";
            fonc();
         }
         
         dirX="inc";
         dirY="inc";
         function fonc(){
            t=setTimeout("fonc()",10);
            cont.fillStyle="#FFF";
            cont.fillRect(0,0,600,400);
            cont.fillStyle="#E70";
            cont.beginPath();
            cont.arc(x,y,20,0,2*Math.PI);
            cont.fill();
            cont.closePath();
            cont.fillStyle="#EEE";
            cont.fillRect(0,y-80/2,4,80);
            cont.fillRect(x-80/2,396,80,4);

            if(dirX=="inc")
               x+=5;   
            if(dirY=="inc")
               y+=5;
            if(dirX=="dec")
               x-=5;
            if(dirY=="dec")
               y-=5;

            if(x>=600-20){
               dirX="dec";
            }
            if(y>=400-20){
               dirY="dec";
            }
            if(x<=24){
               dirX="inc";
            }
            if(y<=24){
               dirY="inc";
            }

            if(y>400-40){
               cont.fillStyle="#E70";
               cont.fillRect(x-80/2,396,80,4);
            }
            if(x<=40){
               cont.fillStyle="#E70";
               cont.fillRect(0,y-80/2,4,80);
            }
         }
      </script>
   </head>
   <body>
      <canvas width="600" height="400" id="can">
      </canvas>
   </body>
</html>
Ce qui donne le résultat suivant:


Vous avez remarqué que le fonction fonc() est récursive et se rappelle chaque 10ms via la méthode setTimeout(). Dans cette fonction on couvre l'espace de travail (canvas) avec du blanc en dessinant un rectangle plein, ensuite on dessine la boule dans la nouvelle position, ce qui donne l'effet d'une animation fluide.