Proprietà miterLimit

La proprietà miterLimit regola l'acuminatezza della giunzione tra due linee nel caso in cui la proprietà lineJoin sia impostata sul valore miter. Come regola: se la lunghezza dell'angolo risulta maggiore del numero impostato in miterLimit, allora la giunzione delle linee si comporta come se lineJoin fosse impostato sul valore bevel.

Di default miterLimit ha valore 10. Non è possibile impostare un valore inferiore a 1.

Sintassi

javascriptcontesto.lineJoin = 'miter' o 'round' o 'bevel';

Esempio

Ora la proprietà lineJoin è impostata sul valore miter, ma finché non ci sono limitazioni, l'angolo è acuto:

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();

Результат:

Esempio

E ora impostiamo una limitazione con 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();

Результат:

Vedi anche