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
kontekst.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:
<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();
:
Przykład
A teraz ustawmy ograniczenie za 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();
:
Zobacz także
-
właściwość
lineCap,
która określa wygląd końca linii
