Ignorer la navigation

IV. Pour aller plus loin

Bien évidemment il existe d'autres méthodes associées à la balise canvas et à javascrit.

On peut ainsi modifier les images, faire des dégradés, créer des ombres, faire des animations ….



Un exemple d'animation que vous pouvez essayer:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>la balise canvas</title>
    <style>body { background: black; } canvas { background: white; }</style>  
  </head>
 
  <body>
 
    <canvas id="mon_canvas" width="150" height="150">
      <p>Désolé, votre navigateur ne supporte pas Canvas. Mettez-vous à jour</p>
    </canvas>
    
    <script>
        var canv1 = document.getElementById('mon_canvas');
    var context1 = canv1.getContext('2d');
 
    var dernierX = canv1.width * Math.random();
    var dernierY = canv1.height * Math.random();
    var hue = 0;   // couleur
    function animate() {
        context1.save();
        context1.lineCap = "round";  
        context1.beginPath();  
        context1.lineWidth = 5 + Math.random() * 10;
        context1.moveTo(dernierX, dernierY);  
        dernierX = canv1.width * Math.random(); // prochain point
        dernierY = canv1.height * Math.random();  
        context1.bezierCurveTo(canv1.width * Math.random(),  canv1.height * Math.random(),  
        canv1.width * Math.random(), canv1.height * Math.random(),  dernierX, dernierY);
        hue = hue + 10 * Math.random();  // modification de la couleur
        context1.strokeStyle = "hsl("+ hue +",50%,50%)";  
        context1.shadowColor = "white";  
        context1.shadowBlur = 10;  
        context1.stroke();
        context1.restore();  
    }
    function assombrir() {
        context1.fillStyle = "rgba(0,0,0,0.1)";  
        context1.fillRect(0, 0, canv1.width, canv1.height);  
    }
    setInterval(animate, 100);
    setInterval(assombrir, 40);  
 
    
   </script>
  </body>
</html>



Pour compléter ce TP :

Créé avec eXeLearning (Nouvelle fenêtre)