CanvasRenderingContext2D.lineCap
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
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 |
---|
HTML Standard # dom-context-2d-linecap-dev |
Compatibilidad con navegadores
BCD tables only load in the browser
Ver también
- La interfaz que define esta propiedad:
CanvasRenderingContext2D
CanvasRenderingContext2D.lineWidth
CanvasRenderingContext2D.lineJoin
- Aplicando estilos y color