Свойство miterLimit
Свойството miterLimit регулира остротата
на свързването на две линии в случаите, когато
свойството lineJoin
е зададено в стойност miter. Как регулира:
ако дължината на ъгъла се окаже по-голяма от числото,
зададено в miterLimit, то свързването на линиите
се държи така, сякаш lineJoin е зададен в стойност
bevel.
По подразбиране miterLimit има стойност 10.
По-малко от 1 не може да се зададе за негова стойност.
Синтаксис
контекст.lineJoin = 'miter' или 'round' или 'bevel';
Пример
В момента свойството lineJoin е зададено
в стойност miter, но засега няма
ограничения, ъгълът е остър:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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();
:
Вижте също
-
свойство
lineCap,
което задава вида на края на линията
