6. En pratique …. le canvas est une zone rectangulaire
(transparente) que l'on peut modifier dynamiquement (c'est à
dire sur laquelle on peut dessiner / écrire / … bref agir !) via
un script (javascript).
Type d'élément pris en charge nativement par le navigateur,
ne nécessite donc pas un plug-in (comme Flash et Java qui
peuvent être vus comme des technologies concurrentes)
7. <html>
<body>
<canvas id="canvas1" width="500"
height="500">
</canvas>
<script type="text/javascript">
var c = document.getElementById("canvas1");
var ctx = c.getContext("2d");
// La suite ...
</script>
</body>
</html>
En pratique …. accéder au canvas et jouer avec.
Identifiant du canvas
Il existe aussi un contexte 3D
appelé « webgl »
11. Gestion d’événements souris : click, déplacement, ...
<script type="text/javascript">
var c = document.getElementById("canvas1");
var ctx = c.getContext("2d");
c.addEventListener("click", ev_mouseclick, false);
function ev_mouseclick(ev) {
…
}
</script>
addEventListener(type, listener, useCapture) ;
type peut être : click, move, mouseup, mousedown, mouseout, mouseover, …
listener : fonction à appeler lorsque l'évènement se produit
useCapture : booléen true/false pour propagation à un autre niveau (tjrs 'false'
dans nos exemples)
12. Gestion d’événements clavier
addEventListener(type, listener, useCapture) ;
type peut être : keydown, keyup, …
listener : fonction à appeler lorsque l'évènement se produit
useCapture : booléen true/false pour propagation à un autre niveau (tjrs 'false'
dans nos exemples)
ATTENTION : le canvas ne peut recevoir les événements clavier que s'il a le focus
(ou « keyboard focus »). Sinon, on peut gérer les événements claviers sur la
fenêtre (objet 'window') et agir quand-même sur le canvas en réponse à ces
événements.
13. Images : affichage, déplacement, filtrage, ..
img = new Image() ;
img.src = 'filename.jpg' ;
ctx.drawRect(img,x,y,width,height) ;
Si width et height sont différent de la taille d'origine, cela retaille automatiquement
l'image à la taille voulue : très pratique !
Il existe aussi un appel à 6 paramètres permettant de faire du 'clipping' (c'est à
dire prendre un morceau définit de l'image et non l'image entière)
ATTENTION : Il est nécessaire de gérer l'évènement onLoad sur l'image, afin de ne
la dessiner que si son chargement est terminé !
Traitements bruts sur l'image :
imgData = ctx.getImageData(x,y,width,height) ;
<...traitements....>
ctx.putImageData(imgData,x,y) ;