Propiedad miterLimit
La propiedad miterLimit regula la agudeza
de la unión de dos líneas en el caso cuando
la propiedad lineJoin
está establecida en valor miter. Cómo regula:
si la longitud del ángulo resulta ser mayor que el número
establecido en miterLimit, entonces la unión de líneas
se comporta como si lineJoin estuviera establecido en valor
bevel.
Por defecto miterLimit tiene valor 10.
No se puede establecer su valor en menos de 1.
Sintaxis
contexto.lineJoin = 'miter' o 'round' o 'bevel';
Ejemplo
Ahora la propiedad lineJoin está establecida
en valor miter, pero por ahora no hay ninguna
restricción, el ángulo es agudo:
<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.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();
:
Ejemplo
Y ahora establezcamos la restricción con ayuda de
miterLimit:
<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.miterLimit = 1;
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();
:
Vea también
-
propiedad
lineCap,
que establece el tipo del final de la línea
