Vidéo (25 min)

Liens de la vidéo

Exemple de l'implémentation

 
Sélectionnez

<html>
  <head>
    <style>
      body {
        background: #ddd;
      }
      canvas {
        background: #fff;
      }
    </style>
  </head>
  <body>
    <canvas id="sketch" width="300" height="300"></canvas>
    <img id="image" src="http://www.whatwg.org/images/logo" style="display: none;" />
    
    <script type="text/javascript">
    (function(){
      
      var canvas = document.getElementById('sketch');
      var ctx = canvas.getContext('2d');
      var img = document.getElementById('image');
      
      var i = 0;
      setInterval(function() {
        ctx.clearRect(0, 0, 300, 300);
        
        ctx.drawImage(img, 0, 0, 300, 300);
        
        ctx.fillStyle = 'rgba(255, 0, '+Math.floor(Math.sin(i/50)*255)+', 0.8)';
        ctx.fillRect(100, i % 300, 100, 100);
        
        /*
ctx.strokeStyle = '#09F';
ctx.lineWidth = 5;
// Commence à tracer un chemin
ctx.beginPath();
// Définit le premier point de traçage à la position (0, 20).
ctx.moveTo(0, 20);
// Trace une ligne jusqu'à la position (canvas.width, 30).
// canvas.width désigne la largeur du canvas (500 dans notre exemple).
ctx.lineTo(canvas.width-100, 30);
ctx.bezierCurveTo(100, 200, 0, 100, 300, 300);
// Indique au canvas de dessiner le chemin tracé depuis le beginPath.
ctx.stroke();
*/
        
        ++ i;
      }, 30);
      
    }());
    </script>
  </body>
</html>

Remerciements

Cet article a été publié avec l'aimable autorisation de Gaëtan Renaudeau, l'article original (HTML Canvas pour les néophytes) peut être vu sur le blog @GreWeb.

Nous tenons à remercier Malikemal pour sa relecture attentive de cet article.