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