Manuale di riferimento HTML

Completo della guida HTML

Attributo lineCap HTML canvas

lineCap è l'attributo dell'API Canvas 2D che specifica come disegnare l'estremità di ogni segmento di linea. Ci sono tre valori possibili: butt, round e square. Il valore predefinito è butt.

Manuale di riferimento HTML canvas

Esempio online

Disegna tre linee con estremi (butt, round, square):

JavaScript:

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Utilizzo dell'attributo lineCap in HTML canvas (Manuale di base su oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag canvas HTML5.
</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>

Prova a vedere ‹/›

Compatibilità del browser

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano l'attributo lineCap.

Attenzione:Internet Explorer 8 e le versioni precedenti non supportano l'elemento <canvas>.

Definizione e uso

L'attributo lineCap imposta o restituisce lo stile della copertura dell'estremità di una linea.

Attenzione:I valori "round" e "square" faranno la linea leggermente più lunga.

Valore predefinito:	butt
Sintassi JavaScript:	context.lineCap="butt\|round\|square";

Valore dell'attributo

Valore	Descrizione
butt	Predefinito. Aggiungi un margine retto a ogni estremità della linea.
rotondo	Aggiungi un angolo rotondo a ogni estremità della linea.
quadrato	Aggiungi un angolo quadrato a ogni estremità della linea.

Manuale di riferimento HTML canvas

HTML: <template> etichetta