Īpašība miterLimit

Īpašība miterLimit regulē divu līniju savienojuma asumu gadījumā, kad īpašība lineJoin iestatīta uz vērtību miter. Kā regulē: ja leņķa garums izrādās lielāks par skaitli, kas iestatīts miterLimit, tad līniju savienojums uzvedas tā, it kā lineJoin būtu iestatīts uz vērtību bevel.

Pēc noklusējuma miterLimit ir vērtība 10. Mazāk par 1 tā vērtību iestatīt nevar.

Sintakse

konteksts.lineJoin = 'miter' vai 'round' vai 'bevel';

Piemērs

Šobrīd īpašība lineJoin ir iestatīta uz vērtību miter, bet pagaidām nekādi ierobežojumi nav noteikti, leņķis ir ass:

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

Piemērs

Un tagad iestatīsim ierobežojumu ar miterLimit palīdzību:

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

Skatiet arī

īpašība lineCap,
kura nosaka līnijas gala izskatu