HTML Canvas pour les néophytes

canvashtmljavascript

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>
generative artist who uses code to make art, explores the frontier of abstract art with algorithms pushing forward to more realistic scenery. Explore physical art via 'Plotting', which consist of drawing with fountain pens on robot. I don't do prints, I do plots: Every physical outcome is truly unique!