Canvas

Aide-mémoire pour la balise Canvas

Canvas

Définition par:

<canvas id="c1" width="500" height="375"> Balise Canvas non reconnue </canvas>

Appel du contexte par les deux lignes:

var canvas = document.getElementById('c1'); var ctx = canvas.getContext('2d');

C'est cet objet ctx dont on appelera propriétés et méthodes.

Propriétés

fillStyle

Une couleur CSS (noir par défaut), un motif, ou un gradient.

strokeStyle

idem pour les traits (couleur, motif, ou gradient)

Rectangles

fillRect(x, y, width, height)

rectangle rempli avec le fillStyle.

strokeRect(x, y, width, height)

idem mais contour seul

clearRect(x, y, width, height)

Path

beginPath()

(re)démarre trait (ou courbe)

moveTo(x, y)

lineTo(x, y)

arc(cx, cy, rayon, 0, Math.PI * 2, true); //false=sens aiguilles d'une montre

closePath()

ferme la forme (trait vers premier point)

stroke()

Affichage contour (après arc: fait un cercle)

fill()

Affichage contenu (après arc: fait un disque)

ctx.beginPath();
ctx.lineWidth="5";
ctx.strokeStyle="green"; // Green path
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // Draw it

ctx.beginPath();
ctx.strokeStyle="purple"; // Purple path
ctx.moveTo(50,0);
ctx.lineTo(150,130);
ctx.stroke(); // Draw it

Image

drawImage(image, dx, dy)

image est un objet de type Image (ou Canvas)

drawImage(image, dx, dy, dw, dh) si redimensionnement

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

clip (sx, sy, sw, sh) préalable au redimensionnement

Couches

canvas2 = document.createElement('canvas'); var container = canvas1.parentNode; canvas2.id = 'canvas2'; canvas2.width = canvas1.width; canvas2.height = canvas1.height; container.appendChild(canvas2); ctx2 = canvas2.getContext('2d'); function img_update () { ctx1.drawImage(canvas2, 0, 0); ctx2.clearRect(0, 0, canvas2.width, canvas2.height); } Ne pas oublier de préciser: <style> #container { position: relative; } #canvas1 { border: 1px solid #000; } #canvas2 { position: absolute; top: 1px; left: 1px; } </style>

Effacer écran

// Store the current transformation matrix
ctx.save();
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0,0,monCanvas.width,monCanvas.height);
ctx.beginPath(); //évite traits incontrôlés
// Restore the transform
ctx.restore();

Exemples Canvas