Professional Documents
Culture Documents
Chapitre 7 Canvas
7.1 Introduction
<canvas> est un lment HTML qui peut tre utilis pour produire des lments 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 crez des dessins sur une page web une balise, crire dans le corps (<body>) d'une page
7.2
La balise <canvas> prend gnralement les attributs suivants : id : un identiant qui nous permettra, par la suite, d'accder 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='...'></canvas>
7.3
7.3.1
Intitialiser <canvas>
document.getElementById(...)
La cration 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.
CANV AS
nous pouvons accder au canvas. Voici donc les premires tapes pour produire un dessin sur une page l'aide de <canvas> :
<html <head> <script> document.getElementById('monCanvas') </script> </head> <body> <canvas id='monCanvas' width='200px' height='200px'> </canvas> <body> </html>
7.3.2
getContext('2d')
La fonction getContext('2d') permet d'obtenir une variable, que nous allons appeler ctx (abrviation pour contexte). Ce contexte contient les fonctions de canvas moveTo(...), lineTo(...), etc...
<html <head> <script> var ctx document.getElementById('monCanvas').getContext('2d') </script> </head> <body> <canvas id='monCanvas' width='200px' height='200px'> </canvas> <body> </html>
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 appele au chargement de la page <body onload='initialiser()'>
7.3.
111
function initialiser(){
document.getElementById('monCanvas').getContext('2d')
</script> </head> <body onload='initialiser()'> <canvas id='monCanvas' width='200px' height='200px'> </canvas> <body> </html>
7.3.4
Fonction de dessin
L'objet ctx contient les mthodes pour crer des dessins, comme moveTo(...), lineTo(...), etc... Dans une fonction (nomme dessiner() ci-dessous), nous pouvons crire les instructions de dessin (qui, en l'occurence dessinent un triangle rectangle).
<html <head> <script> var ctx
function initialiser(){
}
document.getElementById('monCanvas').getContext('2d')
function dessiner(){
112
<body> </html>
CHAPITRE 7.
CANV AS
7.3.5
Notion de chemin
Pour que le dessin s'ache, il est ncessaire de dnir 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.
<html <head> <script> var ctx
function initialiser(){
}
document.getElementById('monCanvas').getContext('2d')
function dessiner(){
</script> </head> <body onload='initialiser();dessiner()'> <canvas id='monCanvas' width='200px' height='200px'> </canvas> <body> </html>
7.4.
113
7.3.6
Rsultat
de <canvas>
Sur la gure 7.4, nous prsentons encore une fois, sous une forme rsume, les instructions d'initialisation de <canvas> :
A : La balise <canvas>
Mettre, dans le corps de la page, une balise <canvas> avec les attributs suivants : l'identiant (id) donne un nom l'lment, ce qui permet d'y accder 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 vnement, 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 arrire-plan un graphique, etc... L'importation d'une image dans canvas est compose de 2 tapes : 1. la cration de l'image (dont on connait l'url) 2. le dessin de l'image dans canvas
114
CHAPITRE 7.
CANV AS
Une faon de crer 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 : img.src = 'myImage.png' ;
7.5.2
drawImage(image,x,y)
permet de dessiner l'image dans le canvas, en plaant le coin suprieur gauche de l'image aux coordonnes (x,y).
7.6
7.6.1
Transformations gomtriques
Introduction
Canvas ore des mthodes permettant d'appliquer des changements au rfrentiel (le systme d'axes) pour eectuer
7.6.
TRANSFORMATIONS GOMTRIQUES
115
La fonction scale(x,y permet de changer l'chelle (i.e faire un zoom ). correspond au changement d'chelle suivant l'axe horizontal, tandis que y correspond au changement d'chelle suivant l'axe vertical. Les 2 paramtres doivent tre des nombres entiers ; les nombres infrieurs 1 correspondent un rtrcissement, tandis que les nombres suprieurs 1 correspondent un aggrandissement.
x
7.6.3
Translation : translate(dx,dy)
La fonction translate(dx,dy) permet de dplacer le rfrentiel du canvas d'une distance horizontale dx et d'une distance verticale dy. Il est important de noter que, la dirence de SVG, c'est le rfrentiel, et non les objets qui se dplacent.
7.6.4 Rotation : rotate(angle)
La mthode rotate(angle) permet de tourner le rfrentiel, 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 mthode translate(dx,dy) ), puis la rotation.