Vlastnost miterLimit

Vlastnost miterLimit reguluje ostrost spojení dvou čar v případě, kdy je vlastnost lineJoin nastavena na hodnotu miter. Jak reguluje: pokud je délka úhlu větší než číslo nastavené v miterLimit, pak se spojení čar chová tak, jako by byla lineJoin nastavena na hodnotu bevel.

Ve výchozím nastavení má miterLimit hodnotu 10. Hodnotu nelze nastavit na méně než 1.

Syntaxe

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

Příklad

Nyní je vlastnost lineJoin nastavena na hodnotu miter, ale zatím nejsou stanovena žádná omezení, úhel 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();

Příklad

A nyní nastavíme omezení pomocí 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();

Viz také

vlastnost lineCap,
která nastavuje vzhled konce čáry