Manuel de référence HTML

Catalogue complet des étiquettes HTML

Attribut lineCap du canvas HTML

lineCap est Canvas 2L'API D spécifie comment dessiner chaque extrémité de chaque segment de ligne. Il y a3valeurs possibles, à savoir : butt, round et square. La valeur par défaut est butt.

Manuel de référence pour HTML canvas

Exemple en ligne

Tracez trois lignes avec des extrémités (butt, round, square) :

JavaScript :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Utilisation de l'attribut lineCap du canvas HTML (Tutoriel de base du site web oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　canvas étiquette.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth =　10;
ctx.lineCap = "butt";
ctx.moveTo(20,　20);
ctx.lineTo(200,　20);
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(20,　40);
ctx.lineTo(200,　40);
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "square";
ctx.moveTo(20,　60);
ctx.lineTo(200,　60);
ctx.stroke();
</script>
</body>
</html>

Voyons voir ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome et Safari prennent en charge la propriété lineCap.

Attention :Internet Explorer 8 et les versions précédentes ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La propriété lineCap définit ou retourne le style de couvre-capsule d'une ligne.

Attention :Les valeurs "round" et "square" font que la ligne est légèrement allongée.

Valeur par défaut :	butt
Syntaxe JavaScript :	contexte.lineCap="butt\|round\|square";

Valeur de l'attribut

Valeur	Description
butt	Par défaut. Ajoutez des bords droits à chaque extrémité de la ligne.
rond	Ajoutez des caps de ligne ronds à chaque extrémité de la ligne.
carré	Ajoutez des caps de ligne carrés à chaque extrémité de la ligne.

Manuel de référence pour HTML canvas

HTML: <template> balise