La propiedad CanvasRenderingContext2D
.lineCap
del API Canvas 2D determina la forma usada para dibujar los puntos finales de las líneas.
Nota: La líneas se puede dibujar con los métodos stroke()
, strokeRect()
, y strokeText()
.
Sintaxis
ctx.lineCap = "butt" || "round" || "square";
Opciones
"butt"
- Los finales de las líneas son recortados. Valor por defecto.
"round"
- Los finales de las líneas son redondeados.
"square"
- Los finales de líneas son recortados al agregar un cuadrado de ancho y altura igual que el grosor de línea.
Ejemplos
Cambiando los finales de línea
En este ejemplo se redondean los puntos finales de una línea recta.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineWidth = 15;
ctx.lineCap = 'round';
ctx.lineTo(100, 100);
ctx.stroke();
Result
Comparando los finales de línea
En este ejemplo se dibujan 3 líneas, cada una con un valor distinto de la propiedad lineCap
. Se agregaron dos guías para resaltar las diferencias entre las tres líneas. Cada una de estas líneas empiezan y terminan en estas guías.
La línea de la izquiera usa la opción por defecto "butt"
. Esta es dibujada completamente al ras de las líneas de guía. La segunda esta configurada para usar la opción "round
. Esta agrega un semicírculo al final que tiene un radio de la mitad del grosor de línea. La línea de la derecha use la opción "square"
. Esta agrega un cuadrado con ancho y altura de la mitad del grosor de línea.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const lineCap = ['butt', 'round', 'square'];
// Draw guides
ctx.strokeStyle = '#09f';
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(140, 10);
ctx.moveTo(10, 140);
ctx.lineTo(140, 140);
ctx.stroke();
// Draw lines
ctx.strokeStyle = 'black';
for (let i = 0; i < lineCap.length; i++) {
ctx.lineWidth = 15;
ctx.lineCap = lineCap[i];
ctx.beginPath();
ctx.moveTo(25 + i * 50, 10);
ctx.lineTo(25 + i * 50, 140);
ctx.stroke();
}
Screenshot | Live sample |
---|---|
![]() |
Especificaciones
Specification | Status | Comment |
---|---|---|
HTML Living Standard La definición de 'CanvasRenderingContext2D.lineCap' en esta especificación. |
Living Standard |
Compatibilidad de navegador.
BCD tables only load in the browser
WebKit/Blink-specific notes
- En WebKit- y navegadores basados en Blink, el método no estandard y obsoleto
ctx.setLineCap()
es implementado ademas de esta propiedad.
Ver también
- La interfaz que define esta propiedad:
CanvasRenderingContext2D
CanvasRenderingContext2D.lineWidth
CanvasRenderingContext2D.lineJoin
- Aplicando estilos y color