108
Chapitre 7 Canvas 7.1 Introduction <canvas> est un élément HTML qui peut être utilisé pour produire des éléments graphiques sur une page web, en utilisant javascript. Par exemple, il peut être utilisé pour dessiner des graphiques, faire des compositions de photos ou encore faire des animations. La balise <canvas> est donc un moyen de créez des dessins sur une page web une balise, à écrire dans le corps () d'une page 7.2 Les attributs de <canvas> La balise <canvas> prend généralement les attributs suivants : id : un identiant qui nous permettra, par la suite, d'accéder à la balise pour y produire le dessin width : la largeur de la surface de dessin height : la hauteur de la surface de dessin Nous avons donc la syntaxe suivante : <canvas id='...' width='...' height='...'> 7.3 Intitialiser <canvas> 7.3.1 document.getelementbyid(...) La création d'un dessin se fait à l'aide d'instructions javascript, écrites dans la partie head d'une page HTML. A l'aide de document.getelementbyid(...) 109
110 CHAPITRE 7. CANVAS nous pouvons accéder au canvas. Voici donc les premières étapes pour produire un dessin sur une page à l'aide de <canvas> : document.getelementbyid('moncanvas') 7.3.2 getcontext('2d') La fonction getcontext('2d') permet d'obtenir une variable, que nous allons appeler ctx (abréviation pour contexte). Ce contexte contient les fonctions de canvas moveto(...), lineto(...), etc... var ctx document.getelementbyid('moncanvas').getcontext('2d') 7.3.3 Fonction d'initialisation Il est plus judicieux de mettre les instructions ci-dessus dans une fonction, que nous appellerons initialiser() et qui sera appelée au chargement de la page <body onload='initialiser()'>
7.3. INTITIALISER <CANVAS> 111 var ctx function initialiser(){ document.getelementbyid('moncanvas').getcontext('2d') <body onload='initialiser()'> 7.3.4 Fonction de dessin L'objet ctx contient les méthodes pour créer des dessins, comme moveto(...), lineto(...), etc... Dans une fonction (nommée dessiner() ci-dessous), nous pouvons écrire les instructions de dessin (qui, en l'occurence dessinent un triangle rectangle). var ctx function initialiser(){ document.getelementbyid('moncanvas').getcontext('2d') function dessiner(){ ctx.moveto(100,100) ctx.lineto(100,50) ctx.lineto(50,100) ctx.lineto(100,100) <body onload='initialiser();dessiner()'>
112 CHAPITRE 7. CANVAS 7.3.5 Notion de chemin Pour que le dessin s'ache, il est nécessaire de dénir un chemin (path), à l'aide de beginpath(). Une fois le chemin créé, on utilise stroke() le contour du chemin, ou ll() pour remplir la forme. var ctx function initialiser(){ document.getelementbyid('moncanvas').getcontext('2d') function dessiner(){ ctx.beginpath() ctx.moveto(100,100) ctx.lineto(100,50) ctx.lineto(50,100) ctx.lineto(100,100) ctx.stroke() <body onload='initialiser();dessiner()'>
7.4. RÉSUMÉ SUR L'INITIALISATION DE <CANVAS> 113 7.3.6 Résultat En exécutant les instructions de la section précédente, nous obtenons la gure ci-contre 7.4 Résumé sur l'initialisation de <canvas> Sur la gure 7.4, nous présentons encore une fois, sous une forme résumée, les instructions d'initialisation de <canvas> : A : La balise <canvas> Figure 7.1 Résultat <canvas> Mettre, dans le corps de la page, une balise <canvas> avec les attributs suivants : l'identiant (id) donne un nom à l'élément, ce qui permet d'y accéder la largeur (width) la hauteur (height) B : La fonction qui initialise la surface de dessin Dans un script, écrit dans la partie head du document HTML un fonction permet d'initialiser la surface de dessin. Voir partie B de la gure 7.4 C : L'appel de la fonction d'initialisation A l'aide d'un événement, appler la fonction d'initialisation. Voir partie C de la gure 7.4 7.5 Les images <canvas> nous donne la possibilité de dessiner des images. Ceci peut par exemple être utilisé pour faire un album de photos, mettre un arrière-plan à un graphique, etc... L'importation d'une image dans canvas est composée de 2 étapes : 1. la création de l'image (dont on connait l'url) 2. le dessin de l'image dans canvas
114 CHAPITRE 7. CANVAS Figure 7.2 Résumé de l'initialisation de <canvas> 7.5.1 Création d'une image Une façon de créer une image est d'en faire un nouvel objet, puis de faire correspondre son attribut source (src) à l'url de l'image que nous voulons acher : var img = new Image() ; // Création de l'objet 'image' img.src = 'myimage.png' ; // Faire correspondre sa source à l'adresse d'une image. 7.5.2 Dessin d'une image dans <canvas> Une fois l'image créée, la fonction drawimage(image,x,y) permet de dessiner l'image dans le canvas, en plaçant le coin supérieur gauche de l'image aux coordonnées (x,y). 7.6 Transformations géométriques 7.6.1 Introduction Canvas ore des méthodes permettant d'appliquer des changements au référentiel (le système d'axes) pour eectuer
7.6. TRANSFORMATIONS GÉOMÉTRIQUES 115 des changements d'échelle des rotations des translations 7.6.2 Changement d'échelle : scale(x,y) La fonction scale(x,y permet de changer l'échelle (i.e faire un zoom). x correspond au changement d'échelle suivant l'axe horizontal, tandis que y correspond au changement d'échelle suivant l'axe vertical. Les 2 paramètres doivent être des nombres entiers ; les nombres inférieurs à 1 correspondent à un rétrécissement, tandis que les nombres supérieurs à 1 correspondent à un aggrandissement. 7.6.3 Translation : translate(dx,dy) La fonction translate(dx,dy) permet de déplacer le référentiel du canvas d'une distance horizontale dx et d'une distance verticale dy. Il est important de noter que, à la diérence de SVG, c'est le référentiel, et non les objets qui se déplacent. 7.6.4 Rotation : rotate(angle) La méthode rotate(angle) permet de tourner le référentiel, autour de l'origine. Un angle positif correspond à une rotation dans le sens des aiguilles d'une montre. Pour faire une rotation autour d'un autre point, on fera d'abord une translation (à l'aide de la méthode translate(dx,dy)), puis la rotation.