Valeur de cette activité : 5 points
Compétence :
PEPS - La balise Canvas et l'animation javascript

A-Module 04 : JAVASCRIPT : 5 points - difficulté : 3

La balise Canvas et l'animation javascript

Présentation

Canvas est un nouvel élément HTML servant au dessin de graphiques qui utilisent des scripts (habituellement en JavaScript). Il peut être utilisé par exemple pour le dessin de graphes, créer des compositions de photos ou de simples (voire pas si simples) animations.

La balise canvas est une extension non standard à la norme HTML qui permet d'effectuer des rendus dynamiques d'images bitmap via des scripts.

Introduite à l'origine par Apple pour être utilisé dans le composant WebKit pour Mac OS X, pour faire fonctionner des logiciels comme Dashboard et le navigateur Safari, elle a été par la suite adoptée par les navigateurs utilisant Gecko (notamment Mozilla Firefox) et Opera puis standardisée par le groupe de travail WHATWG comme une proposition à introduire dans la nouvelle génération des technologies web. Novell a développé une extension activant les XForms dans Internet Explorer[1] et offrant ainsi une prise en charge des fonctionnalités de Canvas.

Canvas se résume en une région de dessin dont la hauteur et la largeur sont définies dans du code HTML. Du code Javascript permet d'accéder à l'aire via une série complète de fonctions de dessins, similaires aux autres API 2D, bien que permettant de générer dynamiquement des graphismes. Certaines personnes ont anticipé cet emploi de Canvas en l'utilisant pour des graphiques, des animations et de la création d'images.

Pour en savoir plus...

ATTENTION : votre navigateur doit supporter le HTML 5 (cliquez ICI pour tester votre navigateur ).

Exemple d'animation utilisant la balise Canvas
Exemple 2 : Le système solaire

Exemple 3 : Horloge
Exemple 4 : Le défilement d'image

Autres exemples à voir ***** : Affichez ce site afin de voir les possibilités d'utilisation de la balise canvas.


  1. Ajoutez une page à votre portfolio en affichant l'assistant HTML ainsi que la directive 55483
  2. Inscrivez dans le champ titre : La balise Canvas et l'animation javascript
  3. Sélectionnez la section : MODULE JAVASCRIPT
  4. Sélectionnez la matière : informatique
  5. Inscrivez dans le champ no de la directive : 55483
  6. Utilisez un de ces liens :

    http://www.crunchzilla.com/game-maven

    ce site (voir section ANIMATION dans le menu de gauche)
    ou
    Utilisez ce lien (suggéré)

    Tutoriel pas à pas expliqué.

    https://www.w3schools.com/graphics/game_intro.asp

    http://www.html5canvastutorials.com/advanced/html5-canvas-linear-motion-animation/

    ou utilisez Google en indiquant les mots ... "HTML basic canvas animation" ou "canvas animation"

  7. Utilisez au besoin cette éditeur (facultatif) https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_path
  8. Copiez/collez ce code dans votre éditeur 
    
<!DOCTYPE HTML>
<html>
   <head>
      
      <script type="text/javascript">
         var im= new Image();
         
         function animate(){
            im.src = 'https://chene-bleu.info/i/ladifference//laurencepierre.png';
            setInterval(drawShape, 100);
         }
         
         function drawShape(){
           
            var canvas = document.getElementById('mycanvas');
                      
            if (canvas.getContext){
                       
               var ctx = canvas.getContext('2d');
               ctx.fillStyle = 'rgba(0,0,0,0.4)';
               ctx.strokeStyle = 'rgba(0,153,255,0.4)';
               ctx.save();
               ctx.translate(150,150); 
               
               var time = new Date(); 
               ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ( (2*Math.PI)/6000)*time.getMilliseconds() );
               ctx.translate(0,28.5);
               ctx.drawImage(im,-3.5,-3.5);
               ctx.restore();
            }
            
            else {
               alert('Votre navigateur ne supporte pas la balise canvas.');
            }
         }
      </script>
   </head>
   
   <body onload="animate();">
      <canvas id="mycanvas" width="400" height="400"></canvas>
   </body>
   
</html>

  9. Inscrivez dans votre page le titre de niveau 1 : La balise Canvas et l'animation javascript
  10. Modifiez ce code afin que votre image se déplace de la gauche vers la droite et lorsque votre image arrive à droite du canvas, elle se replacera à gauche du canvas.

    ATTENTION, vous devrez supprimer certaines commandes et ajouter ces commandes dans votre script : 
    ctx.clearRect(0,0,400,400);

var x=0;

var y=150;

x=x+3;

if(x>400)
{
x=0;
}
  11. Visualisez votre page et apportez des modifications au besoin.