HTML5 Canvas
Étapes pour utiliser Canvas
Définir un élément <canvas>.
Obtenir le canvas par ID.
Accéder au contexte 2d.
Dessiner des formes.
Étape 1 : Définir le canvas
<canvas id="canvas" width="400" height="200">
Canvas not supported.
</canvas>
Étape 2 : Localiser le canvas
window.onload = function () {
var canvas = document.getElementById('canvas');
};
Étape 3 : Accéder au contexte
window.onload = function () {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
};
Il est important de respecter la casse de 2d et non inscrire 2D.
Étape 4 : Dessiner
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 100);
Canvas API
Fonctions
| addColorStop | drawImage | restore |
| arc | fill | rotate |
| arcTo | fillRect | save |
| beginPath | fillText | scale |
| bezierCurveTo | getImageData | setTransform |
| clearRect | isPointInPath | stroke |
| clip | lineTo | strokeRect |
| closePath | measureText | strokeText |
| createImageData | moveTo | transform |
| createLinearGradient | putImageData | translate |
| createPattern | quadraticCurveTo | |
| createRadialGradient | rect | |
Propriétés
| data | miterLimit |
| fillStyle | shadowBlur |
| font | shadowColor |
| globalAlpha | shadowOffsetX |
| globalCompositeOperation | shadowOffsetY |
| height | strokeStyle |
| lineCap | textAlign |
| lineJoin | textBaseline |
| lineWidth | width |
Rectangles
Fonctions
clearRect(x, y, width, height)
fillRect(x, y, width, height)
rect(x, y, width, height)
strokeRect(x, y, width, height)
Propriétés
Arcs
Fonctions
arc(x, y, radius, startAngle, endAngle, antiClockwise)
arcTo(x1, y1, x2, y2, radius)
Propriétés