Właściwość miterLimit

Właściwość miterLimit reguluje ostrość połączenia dwóch linii w przypadku, gdy właściwość lineJoin jest ustawiona na wartość miter. Jak reguluje: jeśli długość kąta jest większa niż liczba ustawiona w miterLimit, to połączenie linii zachowuje się tak, jakby lineJoin było ustawione na wartość bevel.

Domyślnie miterLimit ma wartość 10. Nie można ustawić jej wartości mniejszej niż 1.

Składnia

javascriptkontekst.lineJoin = 'miter' lub 'round' lub 'bevel';

Przykład

Teraz właściwość lineJoin jest ustawiona na wartość miter, ale dopóki nie ma żadnych ograniczeń, kąt jest ostry:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

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

Результат:

Przykład

A teraz ustawmy ograniczenie za pomocą miterLimit:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

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

Результат:

Zobacz także