HTML5 - Introduction à la balise canvas
•Télécharger en tant que ODP, PDF•
0 j'aime•204 vues
Introduction à la balise HTML5 canvas
Recommandé
Contenu connexe
En vedette
Similaire à HTML5 - Introduction à la balise canvas
Dernier
Dernier (6)
HTML5 - Introduction à la balise canvas
- 1. HTML5 Introduction à la balise <canvas> François CREVOLA
- 5. <html> <body> <canvas id="canvas1" width="500" height="500"> Texte alternatif pour les navigateurs ne supportant pas Canvas. </canvas> </body> </html> En pratique ….
- 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 »
- 9. Différents styles, couleurs, ... ctx.fillStyle = « ... » ctx.fill() ; ctx.strokeStyle = « ... » ctx.stroke() ;
- 10. Des formes ... ctx.fillRect(x,y,w,h) ; ctx.arc(x,y,r,startAngle,endAngle,isClockwise) ; Courbe quadratique, Courbe de Bézier ...
- 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) ;