Manual de referência HTML

Catálogo de etiquetas HTML

Atributo lineCap do HTML canvas

lineCap é Canvas 2A propriedade lineCap especifica como cada segmento de linha deve ser desenhado no final da linha. Existem3valores possíveis,分别是：butt, round e square. O valor padrão é butt.

HTML canvas reference manual

Exemplo online

Desenhar três linhas com coberturas de extremidade (butt, round, square):

JavaScript：

Exemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso do atributo lineCap no HTML canvas (Tutorial Básico da Web w3(codebox.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px sólido #d3d3d3>
O seu navegador não suporta HTML5　canvas etiqueta.
</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>

Test to see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome and Safari support the lineCap property.

Note:Internet Explorer 8 and previous versions do not support the <canvas> element.

Definition and usage

The lineCap property sets or returns the cap style of a line.

Note:"round" and "square" values will slightly lengthen the line.

Default value:	butt
JavaScript syntax:	context.lineCap="butt\|round\|square";

Attribute value

Value	Description
butt	Default. Add straight edges to each end of the line.
round	Add round line caps to each end of the line.
square	Add square line caps to each end of the line.

HTML canvas reference manual

HTML: <template> tag