HTML5 - Introduction à la balise canvas

Embed Size (px)

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