HTML5 Canvas - 1.4 Jointures de lignes sur un canvas HTML5 avec lineJoin
Sur un canvas HTML5, les traits qui se rejoignent forment des angles. La propriété lineJoin décide de la forme de ces jointures. Cette leçon présente les trois valeurs possibles et montre leur effet sur des figures dessinées.
La propriété lineJoin
La propriété lineJoin se place sur le contexte du canvas. Elle accepte trois valeurs : miter, round et bevel. La valeur miter est celle par défaut, elle donne une pointe à l'angle.
La valeur round donne une jointure arrondie, appelée ondulée dans la vidéo. La valeur bevel donne une jointure en biseau, c'est-à-dire coupée en diagonale.
context.lineJoin = "bevel";Tester les trois jointures
La vidéo dessine trois figures identiques. Au départ, les jointures sont celles par défaut, c'est-à-dire miter.
Pour changer le rendu, on modifie la valeur dans le fichier JavaScript, puis on enregistre et on ouvre la page. La vidéo applique une jointure en biseau à une figure et une jointure ondulée à une autre.
Comparer les trois figures montre clairement la différence entre les angles pointus, coupés et arrondis.
En résumé
La propriété lineJoin contrôle la forme des angles d'un tracé sur un canvas. Miter donne une pointe, bevel un biseau et round une forme arrondie. Il suffit de changer la valeur et de recharger la page pour voir le résultat. La leçon suivante traite des ombres des figures.
Points clés
- La propriété lineJoin s'applique au contexte du canvas.
- La valeur miter est la valeur par défaut et crée une pointe.
- La valeur bevel crée une jointure en biseau.
- La valeur round crée une jointure arrondie, dite ondulée dans la vidéo.
- Il faut enregistrer le fichier puis recharger la page pour voir le changement.
Questions fréquentes
À quoi sert la propriété lineJoin ?
Elle décide de la forme de l'angle où deux segments de trait se rejoignent. Le résultat se voit surtout sur les figures à angles marqués.
Quelle est la valeur par défaut ?
La valeur par défaut est miter, qui donne une jointure en pointe.
Comment voir le changement ?
Il suffit de modifier la valeur dans le fichier JavaScript, d'enregistrer, puis de recharger la page pour observer les figures.