Propiedad lineCap
La propiedad lineCap establece la apariencia del final
de la línea. Puede tomar los siguientes valores:
butt - final plano (por defecto),
round - final redondeado, square
- final cuadrado.
Sintaxis
contexto.lineCap = 'butt' o 'round' o 'square';
Ejemplo
Dibujemos varias líneas y establezcamos para la primera
el valor butt, para la segunda -
round, para la tercera - square. Presta
atención a la línea roja - marca el inicio establecido
de la línea (mientras que round y square se extienden más allá de ella):
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = 'butt';
ctx.moveTo(75, 50);
ctx.lineTo(75, 150);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = 'round';
ctx.moveTo(105, 50);
ctx.lineTo(105, 150);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = 'square';
ctx.moveTo(135, 50);
ctx.lineTo(135, 150);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 1;
ctx.lineCap = 'butt';
ctx.strokeStyle = 'red';
ctx.moveTo(60, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Ver también
-
propiedad
lineJoin,
que establece el estilo de la unión de líneas -
propiedad
miterLimit,
que limita la longitud del ángulo agudo -
propiedad
lineCap,
que establece la apariencia del final de la línea -
propiedad
lineWidth,
que establece el grosor de la línea
