Свойство 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();

Результат:

Вижте също