Својството miterLimit

Својството miterLimit ја регулира острината на спојување на две линии во случај кога својството lineJoin е зададено во вредност miter. Како регулира: ако должината на аголот добие поголема од бројот, зададен во miterLimit, тогаш спојувањето на линиите се однесува како lineJoin да е зададено во вредност bevel.

Стандардно miterLimit има вредност 10. Помалку од 1 не може да се постави неговата вредност.

Синтакса

javascriptконтекст.lineJoin = 'miter' или 'round' или 'bevel';

Пример

Сега својството lineJoin е поставено на вредност miter, но засега нема ограничувања, аголот е остар:

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

Результат:

Пример

А сега да поставиме ограничување со помош на 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();

Результат:

Погледнете ги и