Уласцівасць 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,
якое задае выгляд канца лініі
