Manual de referencia HTML

Compendio de etiquetas HTML

Propiedad lineCap de HTML canvas

lineCap es Canvas 2La propiedad lineCap especifica cómo se dibujan los extremos de cada segmento de línea en el API de D. Hay3valores posibles,分别是：butt, round y square. El valor predeterminado es butt.

Manual de referencia de canvas HTML

Ejemplo en línea

Dibuje tres líneas con cubiertas de extremo (butt, round, square):

JavaScript:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso de la propiedad lineCap en HTML canvas (Tutoriales básicos de la web oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" altura="150" estilo="borde:1px sólido #d3d3d3>
Su navegador no admite 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>

Ver la prueba ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome y Safari admiten la propiedad lineCap.

Nota:Internet Explorer 8 Y versiones anteriores no admiten el elemento <canvas>.

Definición y uso

La propiedad lineCap establece o devuelve el estilo de extremo de una línea.

Nota:Los valores "redondo" y "cuadrado" harán que la línea sea ligeramente más larga.

Valor por defecto:	recto
Sintaxis de JavaScript:	contexto.lineCap="recto\|redondo\|cuadrado";

Valor del atributo

Valor	Descripción
recto	Por defecto. Agregar bordes rectos a cada extremo de la línea.
redondo	Agregar extremos redondos a cada extremo de la línea.
cuadrado	Agregar extremos cuadrados a cada extremo de la línea.

Manual de referencia de canvas HTML

HTML: <template> etiqueta