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

Contenu connexe

En vedette

Apuntes topografia
Apuntes topografiaApuntes topografia
Apuntes topografia
Heiser HQ
 
231007 ABC
231007 ABC231007 ABC
231007 ABC
Monica Fernandez
 
Bimba kids 17-01-2016 - mordomos da criação
Bimba kids   17-01-2016 - mordomos da criaçãoBimba kids   17-01-2016 - mordomos da criação
Bimba kids 17-01-2016 - mordomos da criação
Regina Lissone
 
CDP+++, Módulo 1 Clase 9
CDP+++, Módulo 1 Clase 9CDP+++, Módulo 1 Clase 9
CDP+++, Módulo 1 Clase 9
Academia de Permacultura Integral
 
Dainik jagran ppt
Dainik jagran pptDainik jagran ppt
Dainik jagran ppt
Rohit Sachdeva
 
2012 03 07_gruzja_gory_czarna
2012 03 07_gruzja_gory_czarna2012 03 07_gruzja_gory_czarna
2012 03 07_gruzja_gory_czarna
Marek Kowolik
 
Finalshow
FinalshowFinalshow
Finalshow
prakhargoel96
 
Formulario 3C
Formulario 3CFormulario 3C
Buffer Overflow Countermeasures, DEP, Security Assessment
Buffer Overflow Countermeasures, DEP, Security AssessmentBuffer Overflow Countermeasures, DEP, Security Assessment
Buffer Overflow Countermeasures, DEP, Security Assessment
Amar Myana
 

En vedette (10)

Apuntes topografia
Apuntes topografiaApuntes topografia
Apuntes topografia
 
231007 ABC
231007 ABC231007 ABC
231007 ABC
 
Bimba kids 17-01-2016 - mordomos da criação
Bimba kids   17-01-2016 - mordomos da criaçãoBimba kids   17-01-2016 - mordomos da criação
Bimba kids 17-01-2016 - mordomos da criação
 
CDP+++, Módulo 1 Clase 9
CDP+++, Módulo 1 Clase 9CDP+++, Módulo 1 Clase 9
CDP+++, Módulo 1 Clase 9
 
VULLKANET
VULLKANETVULLKANET
VULLKANET
 
Dainik jagran ppt
Dainik jagran pptDainik jagran ppt
Dainik jagran ppt
 
2012 03 07_gruzja_gory_czarna
2012 03 07_gruzja_gory_czarna2012 03 07_gruzja_gory_czarna
2012 03 07_gruzja_gory_czarna
 
Finalshow
FinalshowFinalshow
Finalshow
 
Formulario 3C
Formulario 3CFormulario 3C
Formulario 3C
 
Buffer Overflow Countermeasures, DEP, Security Assessment
Buffer Overflow Countermeasures, DEP, Security AssessmentBuffer Overflow Countermeasures, DEP, Security Assessment
Buffer Overflow Countermeasures, DEP, Security Assessment
 

Similaire à HTML5 - Introduction à la balise canvas

Les evenements.pdf
Les evenements.pdfLes evenements.pdf
Les evenements.pdf
MiRA452885
 
WPF.pptx
WPF.pptxWPF.pptx
WPF.pptx
AmeniRajhi1
 
Cours JavaScript.ppt
Cours JavaScript.pptCours JavaScript.ppt
Cours JavaScript.ppt
PROFPROF11
 
5.ateliers avancés
5.ateliers avancés5.ateliers avancés
5.ateliers avancés
Chaikhani Ibtissam
 
Cours JavaScript 2.ppt
Cours JavaScript 2.pptCours JavaScript 2.ppt
Cours JavaScript 2.ppt
PROFPROF11
 
Responsive design, Canvas et SVG
Responsive design, Canvas et SVGResponsive design, Canvas et SVG
Responsive design, Canvas et SVG
Christian SUMBANG
 
JavaSwing.pdf
JavaSwing.pdfJavaSwing.pdf
JavaSwing.pdf
imanebirjmel
 
Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3
davrous
 
cour-DOM-Partie6.pdf
cour-DOM-Partie6.pdfcour-DOM-Partie6.pdf
cour-DOM-Partie6.pdf
AbderrezakChelouche
 

Similaire à HTML5 - Introduction à la balise canvas (9)

Les evenements.pdf
Les evenements.pdfLes evenements.pdf
Les evenements.pdf
 
WPF.pptx
WPF.pptxWPF.pptx
WPF.pptx
 
Cours JavaScript.ppt
Cours JavaScript.pptCours JavaScript.ppt
Cours JavaScript.ppt
 
5.ateliers avancés
5.ateliers avancés5.ateliers avancés
5.ateliers avancés
 
Cours JavaScript 2.ppt
Cours JavaScript 2.pptCours JavaScript 2.ppt
Cours JavaScript 2.ppt
 
Responsive design, Canvas et SVG
Responsive design, Canvas et SVGResponsive design, Canvas et SVG
Responsive design, Canvas et SVG
 
JavaSwing.pdf
JavaSwing.pdfJavaSwing.pdf
JavaSwing.pdf
 
Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3
 
cour-DOM-Partie6.pdf
cour-DOM-Partie6.pdfcour-DOM-Partie6.pdf
cour-DOM-Partie6.pdf
 

Dernier

Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Maalik Jallo
 
Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)
Adrien Blind
 
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptxCours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Jacques KIZA DIMANDJA
 
procede de fabrication mecanique et industriel
procede de fabrication mecanique et industrielprocede de fabrication mecanique et industriel
procede de fabrication mecanique et industriel
saadbellaari
 
CLAUDE 3.5 SONNET EXPLICATIONS sur les usages
CLAUDE 3.5 SONNET EXPLICATIONS sur les usagesCLAUDE 3.5 SONNET EXPLICATIONS sur les usages
CLAUDE 3.5 SONNET EXPLICATIONS sur les usages
Erol GIRAUDY
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
Sébastien Le Marchand
 
Tutoriel interactif d’ingénierie rapide d’Anthropic.pdf
Tutoriel interactif d’ingénierie rapide d’Anthropic.pdfTutoriel interactif d’ingénierie rapide d’Anthropic.pdf
Tutoriel interactif d’ingénierie rapide d’Anthropic.pdf
Erol GIRAUDY
 
Vision de Claude 3.5 SONNET Comment utiliser la vision Utilisez les capacités...
Vision de Claude 3.5 SONNET Comment utiliser la vision Utilisez les capacités...Vision de Claude 3.5 SONNET Comment utiliser la vision Utilisez les capacités...
Vision de Claude 3.5 SONNET Comment utiliser la vision Utilisez les capacités...
Erol GIRAUDY
 

Dernier (8)

Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
 
Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)
 
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptxCours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
 
procede de fabrication mecanique et industriel
procede de fabrication mecanique et industrielprocede de fabrication mecanique et industriel
procede de fabrication mecanique et industriel
 
CLAUDE 3.5 SONNET EXPLICATIONS sur les usages
CLAUDE 3.5 SONNET EXPLICATIONS sur les usagesCLAUDE 3.5 SONNET EXPLICATIONS sur les usages
CLAUDE 3.5 SONNET EXPLICATIONS sur les usages
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
 
Tutoriel interactif d’ingénierie rapide d’Anthropic.pdf
Tutoriel interactif d’ingénierie rapide d’Anthropic.pdfTutoriel interactif d’ingénierie rapide d’Anthropic.pdf
Tutoriel interactif d’ingénierie rapide d’Anthropic.pdf
 
Vision de Claude 3.5 SONNET Comment utiliser la vision Utilisez les capacités...
Vision de Claude 3.5 SONNET Comment utiliser la vision Utilisez les capacités...Vision de Claude 3.5 SONNET Comment utiliser la vision Utilisez les capacités...
Vision de Claude 3.5 SONNET Comment utiliser la vision Utilisez les capacités...
 

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