HTML canvas mitterLimit Property

❮ Odniesienie do płótna HTML

Przykład

Narysuj linie o maksymalnej długości skosu równej 5:

Twoja przeglądarka nie obsługuje tagu HTML5canvastag.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 10;
ctx.lineJoin = "miter";
ctx.miterLimit = 5;
ctx.moveTo(20, 20);
ctx.lineTo(50, 27);
ctx.lineTo(20, 34);
ctx.stroke();

Obsługa przeglądarki

Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Property
miterLimit Yes 9.0 Yes Yes Yes

Definicja i użycie

Właściwość miterLimit ustawia lub zwraca maksymalną długość ścięcia.

Długość narożnika to odległość między narożnikiem wewnętrznym a narożnikiem zewnętrznym, gdzie spotykają się dwie linie.

Ograniczenie skosu rysunek 1

Wskazówka: Właściwość miterLimit działa tylko wtedy, gdy atrybut lineJoin ma wartość „miter”.

Długość skosu rośnie wraz ze zmniejszaniem się kąta narożnika.

Aby długość ścięcia nie była zbyt długa, możemy użyć właściwości miterLimit.

Jeśli długość ścięcia przekracza wartość miterLimit, róg będzie wyświetlany jako „skos” typu lineJoin (rys. 3):

Ograniczenie skosu rysunek 2
Domyślna wartość: 10
Składnia JavaScript: kontekst .miterLimit= liczba ;

Wartości nieruchomości

Value Description Play it
number A positive number that specifies the maximum miter length. If the current miter length exceeds the miterLimit, the corner will display as lineJoin "bevel"

❮ Odniesienie do płótna HTML