HTML Canvas pour les néophytes

Cette vidéo de 20 minutes présente les possibilités du Canvas à travers quelques démos et l’implémentation pas à pas d’un exemple basique.
Elle est destinée à des développeurs débutant dans l’utilisation de Canvas.

Dans la suite de l’article : les liens et codes de la vidéo …

Liens

Specs

Exemples

Bibliothèques graphiques

Exemple de l’implémentation

<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;
        
        ctx.beginPath();               // commence à tracer un chemin
        ctx.moveTo(0, 20);             // défini le premier point de tracage à la position (0, 20)
        ctx.lineTo(canvas.width-100, 30);  // Tracer une ligne jusqu'à la position (canvas.width, 30). canvas.width désigne la largeur du canvas (500 dans notre exemple).
        ctx.bezierCurveTo(100, 200, 0, 100, 300, 300);
        ctx.stroke();                  // Indique au canvas de dessiner le chemin tracé depuis le beginPath
        
        */

          ++i;
        }, 30);
      })();
    </script>
  </body>
</html>