Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

HTML5 - Introduction à la balise canvas

121 Aufrufe

Veröffentlicht am

Introduction à la balise HTML5 canvas

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×