Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 - Introduction à la balise canvas

101 views

Published on

Introduction à la balise HTML5 canvas

Published in: Technology
  • Be the first to comment

  • Be the first to like this

HTML5 - Introduction à la balise canvas

  1. 1. HTML5 Introduction à la balise <canvas> François CREVOLA
  2. 2. <html> <body> <canvas id="canvas1" width="500" height="500"> Texte alternatif pour les navigateurs ne supportant pas Canvas. </canvas> </body> </html> En pratique ….
  3. 3. 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)
  4. 4. <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 »
  5. 5. … ctx.beginPath(); ctx.moveTo(50,200); ctx.lineTo(125,50); ctx.lineTo(200,200); ctx.stroke(); ... Des lignes...
  6. 6. Différents styles, couleurs, ... ctx.fillStyle = « ... » ctx.fill() ; ctx.strokeStyle = « ... » ctx.stroke() ;
  7. 7. Des formes ... ctx.fillRect(x,y,w,h) ; ctx.arc(x,y,r,startAngle,endAngle,isClockwise) ; Courbe quadratique, Courbe de Bézier ...
  8. 8. 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)
  9. 9. 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.
  10. 10. 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) ;
  11. 11. Les frameworks KyneticJs PaperJs ProcessingJs

×