Proprietatea miterLimit

Proprietatea miterLimit reglează ascuțimea îmbinării a două linii în cazul în care proprietatea lineJoin este setată la valoarea miter. Cum reglează: dacă lungimea unghiului devine mai mare decât numărul, setat în miterLimit, atunci îmbinarea liniilor se comportă ca și cum lineJoin ar fi setat la valoarea bevel.

În mod implicit miterLimit are valoarea 10. Mai puțin de 1 nu i se poate seta valoarea.

Sintaxă

javascriptcontext.lineJoin = 'miter' sau 'round' sau 'bevel';

Exemplu

Acum proprietatea lineJoin este setată la valoarea miter, dar încă nu există restricții, unghiul este ascuțit:

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

Результат:

Exemplu

Iar acum setăm o restricție cu ajutorul 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();

Результат:

Vedeți și