DESSINER AVEC HTML5 OBJET CANVAS Images statiques première partie

Transcription

1 DESSINER AVEC HTML5 OBJET CANVAS Images statiques première partie Canvas est une balise HTML mais les méthodes de dessin sont l'affaire de JAVASCRIPT. Canvas, comme img, est une balise de type inline qui peut avoir les attributs suivants : width height id Par défaut les dimensions sont de 300 par 150 pixels Avec canvas on peut réalises des dessins statiques ou animés en 2D. Donc canvas remplace Flash Dans ce premier tutoriel nous allons traiter des images statiques. Dans un deuxième tutoriel nous traiterons des animations. Nous n'utiliserons pas la librairie jquery et pourtant le code HTML et JAVASCRIPT seront bien dissociés : plus aucune référence au JS dans le code HTML. 1 DESSINER DES RECTANGLES Un carré n'est une forme particulière de rectangle! 1.1 LA PAGE NOMMÉE 'RECTANGLES_VIDES.HTM' LE CODE LA PAGE <style> canvas { display : block ; border: 1px solid black; margin-left : auto ; margin-right : auto ; margin-top : 50px ; } </style></head> <canvas width = '300' height = '300'> <p>votre navigateur est obsolète</p> </canvas> var canvas = document.queryselector('canvas'); var contexte = canvas.getcontext('2d'); contexte.strokerect(20,20,100,100); contexte.strokerect(40,40,100,100); contexte.strokerect(60,60,100,100); contexte.strokerect(80,80,100,100); contexte.strokerect(100,100,100,100); contexte.strokerect(120,120,100,100); contexte.strokerect(140,140,100,100); </body></html> APERÇU contexte.strokerect(160,160,100,100); contexte.strokerect(180,180,100,100); 9 carrés de 100 par 100 Chaque carré a son arête supérieure gauche décalée de 20 pixels à droite et en bas par rapport au précédent COMMENTAIRES Du CSS : 1 sur 17

2 L'objet de type canvas a été transformée en objet de type block afin de pouvoir le centrer horizontalement Du HTML : La boîte aura une taille de 300 par 300 Si vous testez cette page avec un vieux navigateur le message : "votre navigateur est obsolète" va apparaître Du JAVASCRIPT : La variable canvas référence la balise canvas. On a utilisé la nouvelle méthode queryselector qui peut être argumenté avec un nom de balise ou un nom de classe ou un nom d'id La variable contexte va chercher l'api de dessin 2D et l'appliquer à la variable canvas Une API de dessin 3D est prévue à terme La fonction strokerect() permet de dessiner les contours d'un rectangle Syntaxe de cette fonction strockerect(x,y, largeur, hauteur) avec x et y sont les coordonnées de l'arête supérieure gauche du rectangle Par défaut le contour est en noir avec une largeur de 1pixel EMPLACEMENT DUS SCRIPT JS Le script est automatiquement appelé puisqu'il il est inséré dans la partie body après code HTML Attention si le script JS est dans la partie body mais avant la balise canvas vous aurez le message d'erreur suivant : canvas is null en effet on ne peut manipuler en JS un objet HTML qui n'existe pas encore! 1.2 LA PAGE NOMMÉE 'RECTANGLES_PLEINS.HTM' APERÇU LE CODE Seule le code JS est changé par rapport à la page précédente : var canvas = ; var contexte = contexte.fillstyle = "rgba(255,0,0,0.5)" ; for (i=1; i<=8; i++) { contexte.translate(20,20) ; // déplacement origine pour rectangle suivant contexte.fillrect(0,0,100,100); // dessiner un rectangle plein } // fin for // huit rectangles décalés COMMENTAIRE La méthode fillstyle permet de définir une couleur de remplissage. On peut utiliser une couleur transparente avec la notation rbga (La quatrième valeur est l'alpha) La méthode translate(x,y) permet de déplacer le point d'origine. Lors de chaque passage dans la boucle on déplace le point d'origine de 20 pixels à droite et en bas 2 sur 17

3 Donc pour chaque rectangle l'arête haut et gauche est toujours la nouvelle origine (0,0) La méthode fillrect crée des rectangles pleins Syntaxe de fillrect(x,y, largeur, hauteur) avec x et y coordonnées de l'arête supérieure gauche du rectangle 1.3 LA PAGE NOMMÉE 'RECTANGLES_VIDES_ET_PLEINS.HTM' Dans cette page il y a deux canvas de 300 par 300. Pour les distinguer les deux zones de dessin il faut bien sûr utiliser un id différent! APERÇU COMMENTAIRES Dans le canvas de gauche 8 rectangles vides avec un contour vert de 5 pixels d'épaisseur Dans le canvas de droite 8 rectangles pleins de couleur verte (lime) avec un alpha de 0.5 A chaque fois il y a un décalage de 20 pixels à droite et à gauche de l'arête haute et gauche du rectangle par rapport au précédent LE CODE (EXTRAITS) <style> canvas { display : inline-block ; border: 1px solid black; margin : 20px ; } </style></head> <canvas width = '300' height = '300' id = 'dessin1'> <p>votre navigateur est obsolète</p> </canvas> var canvas1 = document.queryselector('#dessin1'); var contexte = canvas1.getcontext('2d'); contexte.strokestyle = 'green'; contexte.linewidth = '5' ; for (i=1; i<=8; i++) { ; // déplacement du point d'origine ; // dessiner rectangle vide } <canvas width = '300' height = '300' id = 'dessin2'> </canvas> var canvas2 = document.queryselector('#dessin2'); </body></html> ANALYSE DU CODE Du CSS : 3 sur 17

4 Display : inline-block pour créer des boîtes 'en ligne' c'est à dire sans saut de ligne! Du JS : Deux scripts JS : l'un après le premier canvas l'autre après le deuxième canvas La méthode strokestyle() pour définir une couleur de contour La méthode linewidth() pour définir l'épaisseur du contour On doit produire 8 rectangles donc on crée une boucle qui est répété 8 fois 1.4 EXERCICE : LE DRAPEAU SUISSE APERÇU COMMENTAIRE Canvas de 400 par 400 Drapeau : 200 par 200 au centre du canvas donc arête supérieure gauche du rectangle rouge a les coordonnées suivantes : x : 400 /2-200 / 2 = y : A l'intérieur du rectangle rouge deux rectangles blancs : un rectangle de 140 par 40 centré verticalement dans drapeau donc arête supérieure gauche de ce rectangle dans le drapeau est : x = ( ) / 2 = 30 ; y = (200-40) / 2 = 80 Donc arête supérieure gauche par rapport à canvas : x = ; y = un rectangle de 40 par 140 centré horizontalement dans drapeau donc arête supérieure gauche de ce rectangle dans le drapeau est : x = (200-40) / 2 = 80 ; y = ( ) / 2 = LE CODE DE LA PREMIÈRE VERSION : 'DRAPEAU_SUISSE.HTM' <canvas width = '400' height = '400'> <p></p> </canvas> var canvas = var contexte = = 'red'; contexte.fillrect( contexte.clearrect(130,180,140,40); // attention coordonnées de l'arête supérieure gauche de la bande par rapport à canvas! contexte.clearrect( </body></html> ANALYSE DU CODE La méthode clearrect() est une gomme qui efface l'équivalent d'un rectangle Syntaxe de clearrec(x, y, largeur, hauteur) avec x et y coordonnées de l'arête supérieure gauche du rectangle 4 sur 17

5 1.4.5 CRITIQUES DU CODE Pour dessiner les deux bandes d'effacement il faut d'abord déterminer les coordonnées de l'arête supérieure gauche des deux bandes dans le drapeau et ensuite dans le canvas. C'est fastidieux Le raisonnement serait plus simple si on faisait un changement d'origine! 'DRAPEAU_SUISSE_BIS.HTM' Dans cette version les coordonnées de l'arête supérieur des bandes sont déterminées par rapport à l'arête supérieure gauche du drapeau Le canvas fait 400 par 400 ; le drapeau de 200 par 200 est centré dans canvas Extrait du script : contexte.fillstyle = 'red'; contexte.fillrect(100,100,200,200) ; contexte.translate(100,100); contexte.clearrect( contexte.clearrect( 5 sur 17

6 2 TRACER DES LIGNES DROITES 2.1 LA PAGE NOMMÉE 'CROIX_SAINT_ANDRE.HTM' APERÇU Canvas de 200 par 200. Croix de Saint André centrée dans le canvas Première droite démarre à 50, 50 et se termine à 150,150 Deuxième droite démarre à 150,50 et se termine à 50, LE CODE DE LA PAGE (EXTRAITS) <canvas width ='200' height ='200'> <p>votre navigateur </p></canvas> canvas = ; contexte = ; X = canvas.width ; Y = canvas.height; // donc X vaut et Y vaut : contexte.beginpath();//on démarre un nouveau tracé contexte.moveto(x/4, Y/4); // on place le stylo au point 50, 50 contexte.lineto(x-x/4,y-y/4); // première droite contexte.moveto(x-x/4, Y/4); contexte.lineto(x/4,y-y/4); // deuxième droite contexte.linewidth = 3 ; // épaisseur du trait contexte.stroke() ; //tracer les droites COMMENTAIRE Il est très facile de récupérer les dimensions du canvas avec les propriétés JS width et height Il faut tracer deux diagonales! La méthode beginpath() indique le début du tracé La fonction moveto permet de placer le stylo La fonction lineto permet de tracer (mais sans encre) la première droite On déplace le stylo (moveto) puis on trace la deuxième droite (lineto) Ensuite il faut utiliser l'encre : fonction stroke() pour tracer effectivement les droites avec l'épaisseur précisée par la propriété linewidth LES SYNTAXES La méthode moveto(x,y) avec x et y : coordonnées du point de départ de la droite La méthode lineto(x,y) avec x et y : coordonnées du point d'arrivée de la droite REMARQUES Les points de départ et d'arrivé des droites sont définies par rapport aux dimensions du canvas. Donc on peut modifier la taille du canvas sans qu'il soit nécessaire de modifier le code de la fonction JS TESTS Redimensionnez canvas : 300 par 300 et testez Redimensionnez canvas : 400 par 400 et testez 6 sur 17

7 2.2 LA PAGE NOMMÉE 'PARALLELOGRAMME' APERÇU COMMENTAIRE Canvas de 300 par 300 La forme dans canvas : point de départ de la forme : 100, 50 point d'arrivée première droite : 250,50 point d'arrivée deuxième droite : 200, 250 point d'arrivée troisième droite : 50, 250 point d'arrivé quatrième droite = point de départ première droite contour de la forme de 3 pixels en vert fond de la forme remplie de rouge LE CODE DE LA PAGE (EXTRAIT) <canvas </canvas> contexte.beginpath();//on démarre le tracé contexte.moveto(100,50); contexte.lineto(); contexte.lineto(); contexte.lineto(); contexte.lineto(); contexte.linewidth = 3 ; // épaisseur du trait de contour contexte.strokestyle ='green'; // couleur contour contexte.stroke() ; //tracer le contour contexte.fillstyle ='red'; // couleur de fond contexte.fill() ; COMMENTAIRE // colorier le fond 2.3 UN TRIANGLE APERÇU DE LA PAGE "TRIANGLE.HTM" Canvas de 300 par 300 ; triangle avec fond rouge et borduré de vert 7 sur 17

8 2.3.2 LE CODE DE LA PAGE (EXTRAIT) <canvas </canvas> contexte.beginpath(); // début de la forme contexte.moveto(0, 300); //On se déplace au coin inférieur gauche contexte.lineto(); // première droite jusque 150,0 contexte.lineto(); // deuxième droite jusque 300, 300 contexte.lineto(); // troisième droite jusque 0, 300 ='green'; = 3 ; contexte.stroke(); ='red'; contexte.fill(); LA PAGE NOMMÉE "TRIANGLE_BIS.HTM" Le code de la fonction doit être indépendant de la taille du canvas. Il faut donc utiliser les variables X et Y représentant respectivement la largeur et la hauteur du canvas Testez le code JS avec un canvas de 200 par 200 puis de 400 par EXERCICE : LA PAGE NOMMÉE 'TRIANGLES.HTM' APERÇU Canvas de 500 par triangles isocèles et rectangles ; Les côtes de l'angle droit valent 100px Le premier rectangle a son angle rectangle qui coïncide avec l'arête supérieure gauche de canvas ; le suivant est décalé à droite et en bas de 50 Les triangles sont bordurés de violet (épaisseur de 5) et sont remplis de vert olive LE CODE DE LA PAGE (EXTRAIT) <canvas </canvas> = 'purple'; = '5'; ='olive'; for (i=1; i <= 9; i++) { 8 sur 17

9 contexte.beginpath() ; // début forme contexte.moveto(0,0); contexte.lineto() ; contexte.lineto() ; contexte.lineto(); ; // remplir le fond ; // dessiner contour contexte.translate(50,50); // déplacement point d'origine } // fin for 2.5 LA PAGE NOMMÉE 'SERGENT_CHEF.HTM' Dans l'armée française et pour les sous officiers subalternes les insignes de grade sont des chevrons dorés (ou argentées). Un sergent : 2 chevrons ; un sergent chef : 3 chevrons APERÇU Canvas de 200 par 200 Chevrons d'épaisseur 20 et de couleur or Premier chevron : point de départ : 30, 100 première droite jusqu'à 100, 30 deuxième droite jusqu'à 170, 100 Pour le chevron suivant le y du point de départ augmente de LE CODE JS (EXTRAIT) = "gold"; = 20; for ( ) { contexte.beginpath(); (30,100); (100,30); (170,100); contexte.stroke(); (0,40); } // fin for 9 sur 17

10 3 TRACER DES CERCLES ET ARCS DE CERCLE Deux cercles dans le même canvas 3.1 LA PAGE 'CERCLES.HTM' APERÇU COMMENTAIRE Dimensions du canvas : 200 par 200 Deux cercles de rayon de X/4 Un cercle plein (en jaune) et à côté le contour d'un autre cercle (épaisseur de 5px et couleur orange) Premier cercle a pour centre : X/4 et Y/4 Deuxième cercle a pour centre : X/2 et Y/ LE CODE JS (EXTRAIT) contexte.beginpath(); // début premier cercle contexte.arc(x/4, Y/4, X/4, 0, Math.PI*2); //On trace la courbe délimitant notre forme ='yellow'; contexte.fill(); contexte.beginpath(); //début deuxième cercle contexte.arc(); //On trace la courbe délimitant notre forme = 5;. = 'orange'; contexte.stroke(); SYNTAXE Pour dessiner des arcs de cercle et des cercles il faut utiliser la méthode arc Syntaxe de la méthode : arc(x, y, rayon, angle départ, angle fin [, sens inverse]) x et y sont les coordonnées du centre du cercle angle de départ et angle de fin sont exprimés en radians le sens inverse est facultatif (par défaut false). Si vous tapez true alors vous dessinez un arc de cercle dans le sens inverse des aiguilles d'une montre Un cercle complet c'est un arc de cercle de 360 ou 2 * Π radians PASSAGE DEGRÉS À RADIANS On a l'habitude de raisonner en degrés et non pas en radians. Le tableau ci-dessous vous aide à faire le passage degrés radians 10 sur 17

11 Grâce au dessin ci-dessus vous pouvez remplir le tableau ci-dessous degrés radians Π * Π TESTS Essayez avec un canvas de 300 par 300 Essayez avec un canvas de 400 par EXERCICE 1 : LA PAGE NOMMÉE 'SENS_INTERDIT.HTM' APERÇU COMMENTAIRE Canvas de 300 par 300 Cercle plein au centre du canvas avec un rayon de 100 Bande d'effacement de 160 par 40 au centre du cercle donc au centre du canvas. Donc arête supérieure gauche de cette bande d'effacement est x = 150 (160/ 2) = y = 150 (40/2) = LE CODE DE LA PAGE </style> window.onload = function() { canvas = ; contexte = ; contexte.beginpath(); //On démarre cercle plein contexte.arc( ='red'; contexte.fill(); contexte.clearrect(); ); //On trace la courbe délimitant notre forme } </head> <canvas width = '300' height ='300'><p>Votre navigateur est obsolète</p></canvas> </body></html> 11 sur 17

12 3.2.4 REMARQUE Le script JS est écrit dans la partie head de la page! Le code JS correspondant à la création de la forme est intégrée dans une fonction anonyme. Cette fonction est appelée lors du chargement de la page window.onload =function() C'est l'équivalent en JQUERY de : $(document).ready(function() APERÇU 3.3 EXERCICE 2 : LA PAGE NOMMÉE 'DEMI_CERCLES.HTM' COMMENTAIRE Canvas de 300 par 200 Chaque demi-cercle a un rayon de 50 (ou X/6) Centre du premier demi-cercle (100, 100) ou (X/3, Y/2) Centre du deuxième demi-cercle (200, 100) ou (X/3*2, Y/2) Les deux demi-cercles ont un fond orange LE CODE DE LA FONCTION ANONYME X = ; Y = ; ='orange'; contexte.beginpath(); ; //premier demi cercle contexte.fill(); contexte.beginpath(); ; //deuxième demi-cercle contexte.fill(); TEST Testez avec un canvas de 600 par 400 puis de 150 par VARIANTE : DEMI_CERCLES_ BIS.HTM Canvas de 600 par 400 Epaisseur du trait 5 pixels ; couleur du trait : orange Reconstituez le code de cette page en vous inspirant de la page précédente 3.4 EXERCICE : LA PAGE NOMMÉE 'COEUR_VIDE.HTM' Nous devons dessiner un coeur 12 sur 17

13 3.4.1 ANALYSE DU PROBLÈME Cette image nous montre qu'il s'agit de quatre arcs de cercle appartenant à quatre cercles contigus SOLUTION Canvas de 300 par 300 Les quatre cercles ont pour centre (x, y) : cercle haut gauche : 100, 100 cercle haut droit : 200,100 cercle bas gauche : 100, 200 cercle bas droit : 200, 200 cercle arc de cercle dans ce cercle (en radians) haut gauche de 0,5 à 2 haut droit de 1 à 0,5 bas gauche de1,5 à 2 bas droit de 1 à 1,5 Contour des arcs : rouge avec une épaisseur de LE CODE LA FONCTION (EXTRAIT) contexte.beginpath(); contexte.arc(100, 100, 50, 0.5 * Math.PI, 2 * Math.PI); // premier arc de cercle contexte.stroke(); contexte.beginpath(); contexte.arc(200, 100, 50,Math.PI, Math.PI * 0.5); // deuxième arc de cercle contexte.stroke(); 3.5 EXERCICE : LA PAGE NOMMÉE 'COEUR_VIDE.HTM' APERÇU Canvas de 300 par sur 17

14 les cercles hauts sont pleins Remplissage de la zone délimitée quatre arcs de cercles de 90 appartenant aux quatre cercles Les quatre arcs de cercle : inscrit dans le cercle arc de cercle haut gauche de 0 à 0.5 Π haut droit de 0.5 Π à Π bas gauche de 1.5 Π à 2 Π bas droit de Π à 1.5 Π Il y a donc trois formes donc trois instructions : beginpath() LE CODE DE LA FONCTION contexte.fillstyle = 'red'; contexte.beginpath(); // premier cercle plein contexte.beginpath(); // deuxième cercle plein contexte.beginpath(); // forme à l'intérieur de quatre arcs de cercle contexte.arc( contexte.arc( contexte.arc( contexte.arc( contexte.fill(); 14 sur 17

15 4 IMPORTER IMAGES DANS CANVAS L'un des intérêt majeur de canvas est de pouvoir importer des images et de les modifier. L'importation basique peut se faire via la propriété CSS background-image (ou son équivalent en JS : backgroundimage) 4.1 LA PAGE 'IMPORTER_IMAGE0.HTM' APERÇU Canvas de 800 par 600 (taille de l'image tortue.jpg) On a ajouté à une image existante une bulle. Une bulle c'est un rectangle avec du texte plus un triangle LE CODE DE LA PAGE <style> canvas { ; background-image : url(tortue.jpg) ; } </style></head> <canvas width = '800' height = '600'></canvas> = 'white' ; (500,100, 300, 100); // rectangle à fond blanc ='navy'; // couleur du texte ='center'; = " bold italic 20px arial" ; ("Que c'est dur la vie!", 650, 150) ; contexte.beginpath();//on démarre un nouveau tracé contexte.moveto(700, 200);//On se déplace au coin inférieur gauche (750, 200); (650, 280); (700, 200); = 'white'; // couleur de fond triangle de la bulle contexte.fill() ; 4.2 EXERCICE : LA PAGE NOMMÉE 'IMPORTER_IMAGES_ALEATOIRE.HTM' Dans la boîte canvas s'affiche de façon aléatoire l'une des cinq images et la légende correspondante à cette image APERÇU Canvas de 800 par sur 17

16 4.2.2 LE CODE DU SCRIPT var X = canvas.width ; var Y = canvas.height; var tab_images = new Array('foret.jpg', 'tortue.jpg', 'jardin.jpg', 'toucan.jpg', 'riviere.jpg') ; var tab_legendes = new Array('la forêt', 'la tortue', 'le jardin', 'le toucan', 'la rivière'); var rang = Math.floor(Math.random()* tab_images.length) ; // retourne un entier compris entre 0 et 4 (si 5 images) var nom_image = tab_images[rang]; // retourne le nom d'une des images var url = "url(" + nom_image + ")"; // retourne le chemin de l'image var legende = tab_legendes[rang]; canvas.style.backgroundimage = url ; // création d'une bulle centrée horizontalement et de X/2 de large et haute de 100 // donc coordonnées de la bulle : X/4, 500 // insertion du contenu de la variable legende // Texte centré verticalement et horizontalement dans la bulle // couleur de texte : navy // mise en forme du texte : bold italic 20px arial 4.3 LA MÉTHODE DRAWIMAGE() Si vous voulez importer une image et : la positionner dans canvas et/ou la redimensionner et/ou la rogner Vous devez alors utiliser la méthode JS drawimage() appliquée à un nouvel objet de type image APERÇU 4.4 LA PAGE NOMMÉE 'IMPORTER_IMAGE1.HTM' Canvas de 1000 par sur 17

17 Image de 800 par 600 est centrée horizontalement et verticalement dans canvas LE CODE JS (EXTRAIT) var X = canvas.width; var Y = canvas.height; var image = new Image(); image.src = 'tortue.jpg'; var x = (X - image.width) / 2 ; var y = (Y - image.height) / 2 ; contexte.drawimage(image,x,y); LA MÉTHODE DRAWIMAGE Ici nous avons utilisé la première syntaxe possible : drawimage(image, x,y) Avec x et y coordonnées du coin supérieur gauche 4.5 LA PAGE NOMMÉE 'IMPORTER_IMAGE2.HTM' APERÇU Canvas de 1000 par 800 L'image est redimensionnée : la largeur et la hauteur sont divisées par deux et cette image réduite est positionnée au centre du canvas LE CODE JS (EXTRAIT) var image = new Image(); image.src = 'tortue.jpg'; var largeur = (image.width) / 2 ; var hauteur = (image.height) / 2 ; var x = var y = contexte.drawimage(image,x,y,largeur,hauteur); COMMENTAIRE Ici nous avons utilisé la deuxième syntaxe possible : drawimage(image, x,y,largeur,hauteur) avec : x et y coordonnées du coin supérieur gauche de l'image largeur et hauteur : dimension de l'image dans le canvas 17 sur 17