Vlastnosť miterLimit

Vlastnosť miterLimit reguluje ostrosť spojenia dvoch čiar v prípade, keď je vlastnosť lineJoin nastavená na hodnotu miter. Ako reguluje: ak je dĺžka uhla väčšia ako číslo zadané v miterLimit, tak sa spojenie čiar správa tak, ako keby bola lineJoin nastavená na hodnotu bevel.

Predvolená hodnota miterLimit je 10. Hodnotu nie je možné nastaviť na menej ako 1.

Syntax

kontext.lineJoin = 'miter' alebo 'round' alebo 'bevel';

Príklad

Teraz je vlastnosť lineJoin nastavená na hodnotu miter, ale zatiaľ nie sú stanovené žiadne obmedzenia, uhol je ostrý:

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

Príklad

A teraz nastavíme obmedzenie pomocou 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();

Pozrite tiež

vlastnosť lineCap,
ktorá nastavuje vzhľad konca čiary