<canvas> : Démo HTML5
Mise à jour : 2017-01-22
Il s'agit d'une API de dessin 2D (pour l'instant)
qui par certains côtés s'apparente au format SVG,
et se veut une alternative non-propriétaire au format Flash.
<canvas>
- width : largeur de la zone de dessin
- height : hauteur de la zone de dessin
API
- Transformations
- Compositions
- Ajout de styles et de couleurs
- Formes géométriques
- Utilisation d'images
- Manipulation de pixels
- Animations basiques
Notes sur le tuto
- Un projet open-source (ExplorerCanvas) permet à IE de supporter l'API Canvas en attendant son support natif.
- Mozilla propose une documentation complète, incluant des tutoriaux.
- Canvas tests propose une série de tests exhaustifs.
- Implémentations :
- Clone du "Paint" de Microsoft Windows : CanvasPaint
- Logiciel de dessin : Canvas Painter (compatible avec IE car utilisant ExplorerCanvas, cf. note ci-dessus)
- Un paint-like bien plus beau que l'original : Sketchpad
- Application Web de Google : PaintWeb
- Simulateur de tissu : Cloth Simulation
- Doom-like : Canvascape
- Jeux FPS : Canvex
- Toutes les démonstrations Canvas : Canvas Demo
- L'exemple ci-dessous est extrait du WHATWG.
Exemple de code HTML5
<canvas id="demo" width="700" height="350">
<span class="ko"><canvas> non supportée !</span>
</canvas>
<script>
var context = document.getElementById("demo").getContext("2d");
var lastX = context.canvas.width * Math.random();
var lastY = context.canvas.height * Math.random();
var hue = 0;
function line() {
context.save();
context.translate(context.canvas.width/2, context.canvas.height/2);
context.scale(0.9, 0.9);
context.translate(-context.canvas.width/2, -context.canvas.height/2);
context.beginPath();
context.lineWidth = 5 + Math.random() * 10;
context.moveTo(lastX, lastY);
lastX = context.canvas.width * Math.random();
lastY = context.canvas.height * Math.random();
context.bezierCurveTo(context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
lastX, lastY);
hue = hue + 10 * Math.random();
context.strokeStyle = "hsl(" + hue + ", 50%, 50%)";
context.shadowColor = "white";
context.shadowBlur = 10;
context.stroke();
context.restore();
}
setInterval(line, 50);
function blank() {
context.fillStyle = "rgba(0,0,0,0.1)";
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
}
setInterval(blank, 40);
</script>