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 »

8. … ctx.beginPath(); ctx.moveTo(50,200); ctx.lineTo(125,50); ctx.lineTo(200,200); ctx.stroke(); ... Des lignes...

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) ;

14. Les frameworks KyneticJs PaperJs ProcessingJs

HTML5 - Introduction à la balise canvas

HTML5 - Introduction à la balise canvas

Recommended

More Related Content

Viewers also liked

Viewers also liked(10)

Similar to HTML5 - Introduction à la balise canvas

Similar to HTML5 - Introduction à la balise canvas(9)

HTML5 - Introduction à la balise canvas