Page 6: Animer les dessins sur un canvas

^{Toutes les pages}

Dessiner avec Javascript et la balise canvas

Page 1
La balise canvas

Page 2
Contexte de rendu et couleurs

Page 3
Dessiner les formes de base - I

Page 4
Dessiner les formes de base - II

Page 5
Ecrire du texte et importer des images

Page 6
Animer les dessins sur un 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: boule 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>