View  Edit  Attributes  History  Attach  Print  Search

Javascript : code minimum Javascript dans une page HTML

  • Ce code Javascript affiche un canvas simple dans une page HTML.

<!-- Debut de la page -->
<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">
                <!--                     
                window.onload = function() {

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

                        canvas.width = 300; // largeur canvas
                        canvas.height = 300; // hauteur canvas

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

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

                                // le code graphique ci-dessous

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

                                // carre vert
                                ctx.fillStyle = "rgb(0,255,0)"; // couleur remplissage
                                ctx.fillRect (50, 50, 200, 200); // rectangle

                        } // fin si canvas existe

                        else {
                                // code si canvas non disponible
                        } // fin else

                } // fin window.onload
                //-->
                </script>
                <!-- Fin du code Javascript -->    

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

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

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

                <br />
                Exemple de Canva

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

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