HTML5 Canvas - 1.3 Ajouter de la finition aux extrémités des lignes
Quand vous tracez une ligne sur Canvas, son extrémité a une forme par défaut. La propriété lineCap permet de la modifier. Cette leçon reprend trois lignes déjà dessinées et montre les trois valeurs possibles.
Régler l'épaisseur et la fin de ligne
Commencez par définir l'épaisseur des lignes avec lineWidth. La vidéo passe la valeur à 10 pour que les différences se voient bien.
La propriété lineCap accepte trois valeurs. La valeur butt, par défaut, donne une extrémité droite. La valeur round donne une extrémité arrondie, et la valeur square une extrémité carrée qui dépasse un peu.
context.lineWidth = 10;
context.lineCap = 'round';Vérifier le code
Enregistrez le fichier JavaScript avant de recharger la page. Vérifiez aussi que l'identifiant de la toile est le même dans le HTML et dans le JavaScript, sinon rien ne s'affiche.
Dans la démonstration, les trois lignes bleue, jaune et rouge apparaissent avec des extrémités différentes selon la valeur choisie.
- Définir lineWidth
- Choisir lineCap : butt, round ou square
- Enregistrer et recharger la page
- Vérifier l'identifiant de la toile
En résumé
La propriété lineCap change la forme des extrémités d'une ligne. Elle prend les valeurs butt, round ou square. Pensez à enregistrer le fichier et à vérifier l'identifiant de la toile.
Points clés
- lineCap détermine la forme des extrémités de ligne.
- butt est la valeur par défaut.
- round arrondit l'extrémité, square la rend carrée.
- lineWidth règle l'épaisseur des lignes.
- Une erreur d'identifiant de toile empêche le dessin.
Questions fréquentes
Que se passe-t-il si je n'écris pas lineCap ?
La ligne utilise la valeur par défaut, butt, avec une extrémité droite.
Pourquoi mes lignes n'apparaissent-elles pas ?
La vidéo rappelle de vérifier que la toile a le même identifiant dans le HTML et dans le JavaScript.
Quelle valeur choisir ?
Cela dépend du rendu souhaité : butt pour une fin nette, round pour une fin arrondie, square pour une fin carrée.