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

javascriptcontexto.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:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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