View
61
Download
1
Category
Preview:
Citation preview
HTML5Introduction la balise
Franois CREVOLA
Texte alternatif pour les navigateurs ne supportant pas Canvas.
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'lment pris en charge nativement par le navigateur, ne ncessite donc pas un plug-in (comme Flash et Java qui peuvent tre vus comme des technologies concurrentes)
var c = document.getElementById("canvas1"); var ctx = c.getContext("2d"); // La suite ...
En pratique . accder au canvas et jouer avec.
Identifiant du canvasIl 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...
Diffrents 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 Bzier ...
Gestion dvnements souris: click, dplacement, ...
var c = document.getElementById("canvas1"); var ctx = c.getContext("2d");
c.addEventListener("click", ev_mouseclick, false);
function ev_mouseclick(ev) {}
addEventListener(type, listener, useCapture);
type peut tre: click, move, mouseup, mousedown, mouseout, mouseover, listener: fonction appeler lorsque l'vnement se produituseCapture: boolen true/false pour propagation un autre niveau (tjrs 'false' dans nos exemples)
Gestion dvnements clavier
addEventListener(type, listener, useCapture);
type peut tre: keydown, keyup, listener: fonction appeler lorsque l'vnement se produituseCapture: boolen true/false pour propagation un autre niveau (tjrs 'false' dans nos exemples)
ATTENTION: le canvas ne peut recevoir les vnements clavier que s'il a le focus (ou keyboard focus). Sinon, on peut grer les vnements claviers sur la fentre (objet 'window') et agir quand-mme sur le canvas en rponse ces vnements.
Images: affichage, dplacement, filtrage, ..
img = new Image();img.src = 'filename.jpg';
ctx.drawRect(img,x,y,width,height);
Si width et height sont diffrent de la taille d'origine, cela retaille automatiquement l'image la taille voulue: trs pratique!
Il existe aussi un appel 6 paramtres permettant de faire du 'clipping' (c'est dire prendre un morceau dfinit de l'image et non l'image entire)
ATTENTION: Il est ncessaire de grer l'vnement 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);
ctx.putImageData(imgData,x,y);
Les frameworks
KyneticJs
PaperJs
ProcessingJs
Recommended