Web / HTML - TD n°10

Vous trouverez à l'adresse suivante l'ensemble de ce TD ainsi qu'un supplément d'exemples : http://developer.mozilla.org/en/docs/Canvas_tutorial.

Initialement introduit par Apple et standardisé par WHATWG, l'élément <canvas> est une extension du standard HTML conçue pour des applications graphiques.

Il est bon de noter que l'élément <canvas> n'est pas supporté par tous les navigateurs. Assurez de posséder au moins Firefox 1.5.

Ex 1 - Il étais une fois 

<canvas id="canvas" width="150" height="150">
  Votre navigateur ne supporte pas l'élément canevas
</canvas>

Comme vous le constatez l'élément canvas n'est rien d'autre qu'une balise HTML définissant une fenêtre de dessin. Cette zone est accessible via la méthode DOM getContext permettant d'acceder aux fonctions de dessin. Pour l'instant, un seul contexte de dessin est disponible, il s'agit du contexte 2d.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

Exécutez votre première page :

<html>
  <head>
    <title>Canvas tutorial</title>

    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>

    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>

  </head>

  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>

</html>

Ex 2 - L'eau mais de faire

En vous servant des exemples, dessinez un homme en fil de fer à 4 étapes clés d'un mouvement de marche. En jouant cycliquement les 4 représentations de votre bonhomme, on devrait avoir l'impression qu'il est en mouvement.

Ex 3 - Intéraction

En vous servant des évènements du clavier vous allez contrôler l'animation. En définissant des écouteurs d'évènements, vous serez en mesure d'intercepter les intéractions clavier de l'utilsateur et exécuter votre fonction d'animation du personnage. Exemple de code :

/*
 * Fonction de gestion des touches enfoncées
 */
function doKeyDown(evt){
	// fleche du haut
  switch(evt){
    // fleche du haut
    case 38:  perso_avance();
              break;
    // fleche du bas
    case 40:  perso_recule();
              break;
    // par default
    default:  alert("touche non prise en charge");
              break;
  } // end switch

} // end function:doKeyDown

window.addEventListener('keydown', doKeyDown, true);

Libre à vous de remplacer votre bonhomme de fer par une série d'images animées. Reportez vous au tutoriel pour plus d'informations.