Propriété lineCap
Exemple
Dessinez une ligne avec des extrémités arrondies :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(20, 20);
ctx.lineTo(20, 200);
ctx.stroke(); Description
La propriété lineCap définit ou renvoie le style des extrémités d'une ligne.
Valeurs légales : butt (par défaut), round et square.
Remarque
Les valeurs round et square allongent légèrement les lignes.
Voir aussi :
La propriété lineCap (Définir les extrémités)
La propriété lineJoin (Définir les jonctions)
La propriété lineWidth (Définir la largeur de ligne)
La propriété fillStyle (Définir la couleur/style de remplissage)
La propriété strokeStyle (Définir la couleur/style de contour)
Syntaxe
| context .lineCap = "butt|round|square" |
Valeurs de propriété
| Valeur | Description | Jouez-le |
|---|---|---|
| butt | Un bord plat aux extrémités de la ligne | |
| round | Un cap arrondi aux extrémités de la ligne | |
| square | Un cap carré aux extrémités de la ligne |
Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
lineCap est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |