View  Edit  Attributes  History  Attach  Print  Search

Javascript : Exemple d'animation d'un pixel dans un canvas

  • Dans ce code Javascript intégré dans une page HTML, je vous montre comment réaliser l'animation d'un pixel en appelant à intervalle régulier une fonction.

<!DOCTYPE HTML>

<!-- Debut de la page HTML  -->
<html>

        <!-- Debut entete -->
        <head>

                <meta charset="utf-8" /> <!-- Encodage de la page  -->
                <title>JavaScript: Test Canva </title> <!-- Titre de la page -->

                <!-- Debut du code Javascript  -->
                <script language="javascript" type="text/javascript">
                <!--                     

                // code javascript par X. HINAULT - www.mon-club-elec.fr - tous droits reserves - 2013 - GPL v3

                // variables / objets globaux - a declarer avant les fonctions pour eviter problemes de portee
                var canvas= null; // objet Canvas
                var contextCanvas = null; // objet context Canvas
                var compt=0; // variable de comptage

                window.onload = function() { // fonction au lancement

                        canvas = document.getElementById("nomCanvas"); // declare objet canvas a partir id = nom

                        if (canvas.getContext){ // la fonction getContext() renvoie True si canvas accessible

                                contextCanvas = canvas.getContext("2d"); // objet context global permettant acces aux fonctions de dessin

                                // le code graphique ci-dessous
                                // carre  de la taille du canvas
                                contextCanvas.fillStyle = "rgb(255,255,200)"; // couleur de remplissage rgb 0-255
                                contextCanvas.fillRect (0, 0, canvas.width, canvas.height); // rectangle

                                // parametres texte a utiliser
                                contextCanvas.font = "10px Verdana"; // police du Canvas

                                // intervalle de rafraichissement
                                interval=window.setInterval(draw, 100); // fixe intervalle en ms et fonction a executer
                                // objet utilisable avec la fonction clearInterval

                        } // fin si canvas existe

                } // fin window.onload

                function draw() { // fonction qui est appelee  a intervalle regulier

                        if (contextCanvas!=null) {

                                // carre de la taille du canvas = efface contenu canva
                                contextCanvas.fillStyle = "rgb(255,255,200)"; // couleur de remplissage rgb 0-255
                                contextCanvas.fillRect (0, 0, canvas.width, canvas.height); // rectangle

                                // trace 1 pixel
                                contextCanvas.fillStyle = "rgb(0,0,255)"; // couleur de remplissage rgb 0-255
                                contextCanvas.fillRect (compt,compt, 1,1); // rectangle

                                contextCanvas.fillStyle = "rgb(0,0,0)"; // couleur remplissage
                                contextCanvas.fillText(compt.toString()+","+compt.toString(), compt, compt); // affiche text                             

                                compt=compt+1;
                                if (compt>canvas.width) compt=0; // RAZ compt si on depasse taille canvas = on efface

                        }       // fin if context !=null
                } // fin draw  
 

                //-->
                </script>
                <!-- Fin du code Javascript -->    

        </head>
        <!-- Fin entete -->

        <!-- Debut Corps de page HTML -->
        <body >

                <canvas id="nomCanvas" width="300" height="300"></canvas>

                <br />
                Exemple utilisation setInterval avec un Canvas

        </body>
        <!-- Fin de corps de page HTML  -->

</html>
<!-- Fin de la page HTML  -->