HTML5 Canvas - Récapitulatif des attributs du canevas HTML5 (hors-série)
Ce hors-série fait le point sur les attributs utilisés pour dessiner sur le canevas HTML5. Chaque instruction suit la même logique : le contexte du canevas, un point, puis le nom de l'attribut ou de la méthode. Cette récapitulation vous aide à retrouver rapidement la bonne commande selon ce que vous voulez modifier.
Utiliser le contexte du canevas
Pour réagir avec le canevas, on passe toujours par son contexte. On écrit le nom du contexte, un point, puis l'attribut ou la méthode voulue. Chaque instruction se termine par un point-virgule, à ne pas oublier.
Tracer et modifier le trait
La méthode stroke dessine le trait. Les propriétés lineWidth et strokeStyle règlent respectivement son épaisseur et sa couleur. Ces trois éléments suffisent pour obtenir un premier trait visible.
- stroke : dessine le trait
- lineWidth : modifie l'épaisseur du trait
- strokeStyle : modifie la couleur du trait
Construire une ligne : départ, arrivée et jointures
La méthode moveTo place le point de départ d'un trait, avec ses coordonnées X et Y. La méthode lineTo trace ensuite jusqu'au point d'arrivée, également défini par ses coordonnées X et Y.
La propriété lineCap gère la fin de la ligne. Ses valeurs sont butt, qui est la valeur par défaut, round et square. La propriété lineJoin gère la jointure entre deux segments : miter par défaut, bevel pour un biseau, et round pour une jointure arrondie.
Ajouter une ombre et commencer un nouveau chemin
Les propriétés shadowColor, shadowOffsetX et shadowOffsetY permettent de colorer l'ombre et de la décaler horizontalement ou verticalement. La propriété shadowBlur règle la portée du flou.
La méthode beginPath démarre un nouveau chemin, sans tenir compte des tracés précédents. Elle ne reçoit aucune valeur, seulement des parenthèses vides.
En résumé
Ces attributs forment la base du dessin sur un canevas. Retenez surtout la logique : un contexte, un point, un attribut, puis un point-virgule. Revenez à ce hors-série dès que vous cherchez une propriété précise, car chaque attribut a un rôle distinct.
Points clés
- Le contexte du canevas reçoit chaque instruction de dessin, suivie d'un point-virgule.
- lineWidth et strokeStyle règlent l'épaisseur et la couleur du trait.
- moveTo et lineTo définissent le point de départ et le point d'arrivée d'une ligne.
- lineCap et lineJoin modifient la fin et les jointures d'une ligne.
- shadowColor, shadowOffsetX, shadowOffsetY et shadowBlur règlent l'ombre.
- beginPath démarre un nouveau chemin, indépendant des précédents.
Questions fréquentes
Par quoi commence une instruction de dessin sur le canevas ?
Elle commence par le contexte du canevas, suivi d'un point, puis de l'attribut ou de la méthode. On termine par un point-virgule.
Quelle différence entre moveTo et lineTo ?
moveTo place le point de départ sans tracer de trait. lineTo trace ensuite un segment jusqu'au point indiqué par ses coordonnées X et Y.
Que fait la valeur round de lineCap ?
Elle arrondit la fin de la ligne. Les deux autres valeurs possibles sont butt, la valeur par défaut, et square.