Remi Forax
“The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap.”
source: Wikipedia.org - Canvas Element
“L'élément canvas est une partie du HTML5 et permet d'afficher dynamiquement avec un script des figures 2D et des images bitmap. C'est un modèle procédural de bas niveau qui met à jour une image.”
source : Wikipedia.org - L'élément Canvas
| HTML 5 Canvas | 2014 |
| Context 2D | 2015 |
Déclaré avec la balise <canvas>
<canvas id="canvas-id"
width="250"
height="180"></canvas>
accessible en Javascript avec getElementById
L'arbre DOM correspondant au canvas doit avoir été créé au moment de l'appel à document.getElementById()
<script>
let canvas = document.getElementById("canvas-id");
// canvas == null
</script>
<canvas id="canvas-id"></canvas>
Sinon document.getElementById() renvoie null
permet enregistrer une fonction qui sera appelée une fois que le document HTML est chargé
<script>
window.onload = () => {
let canvas = document.getElementById("canvas-id");
// canvas != null
};
</script>
<canvas id="canvas-id"></canvas>
window.onload() est appelée après que le canvas a été créé
permet de dessiner avec JavaScript sur un canvas HTML
<canvas id="canvas-example1"
width="250"
height="180"></canvas>
On récupère l'élément Canvas par son nom
puis on demande le contexte de dessin 2D pour dessiner.
Il existe aussi un context 3D, défini par la specification WebGL.
Le point (x=0, y=0) est en haut à gauche
x : coordonnée sur l'axe horizontal (vers la droite)
y : coordonnée sur l'axe vertical (vers le bas)
La façon d'afficher dépend de l'état de propriétés du context
Par exemple, l'affichage de la couleur d'un rectangle dépend de la propriété stokeStyle
Les couleurs sont les mêmes que les couleurs de CSS
On définit un gradient linéaire par deux points (x1, y1) (x2, y2) puis plusieurs couleurs (color stops) sur une échelle entre 0 et 1
On définit un gradient circulaire par 2 cercles (x1, y1, r1) (x2, y2, r2)
stroke = trait
fill = remplissage
On peut faire des effets d'ombre en dessinant avec un décalage d'1 ou 2 pixels
stroke = trait
fill = remplissage
moveTo déplace le crayon, lineTo place une ligne,
beginPath indique le début d'un chemin, stroke dessine
arc(x, y, radius, startAngle, endAngle)
les angles sont en radians !
Le point d'angle 0 est au centre à droite et on tourne dans le sens des aiguilles d'une montre
Lorsqu'une est fini de charger, image.onload() est appelée.
On peut spécifier onLoad en utilisant une closure, ce qui évite de devoir trouver un nom à la fonction.
c'est une closure car les variables context et image sont prises du scope englobant !
La fonction window.addEventListener permet d'enregistrer une fonction qui sera appelée sur un évènement clavier d'un type donné.
Appuyer sur la touche 'a'
"keydown" si on appuie sur une touche,
"keyup" si on relâche la touche.
Appuyer sur la touche 'a'
keyCode permet de récupérer le code (plus ou moins ASCII) de la touche
Utiliser les touches 'r' et 't' pour bouger le carré
onmousedown, onmousemove, onmouseup sont appelées lorsque l'on utilise la souris sur un élément
La fonction recoit un évènement (event) contenant les coordonées (offsetX et offsetY)
onmousemove est appelée lorsque l'on bouge la souris,
si l'on veut détecter si l'on bouge en appuyant,
il faut un booléen supplémentaire
setTimeout(action, temps) permet de déclencher une action après un temps d'attente (en ms)
on peut appeler setTimeout() plusieurs fois avec la même fonction
window.setInterval permet de rappeler une fonction à intervalles réguliers
demande une animation dès que possible