HTML-Canvas miterLimit- Eigenschaft
Beispiel
Zeichnen Sie Linien mit der maximalen Gehrungslänge von 5:
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();
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
| Property | |||||
|---|---|---|---|---|---|
| miterLimit | Yes | 9.0 | Yes | Yes | Yes |
Definition und Verwendung
Die Eigenschaft miterLimit legt die maximale Gehrungslänge fest oder gibt sie zurück.
Die Gehrungslänge ist der Abstand zwischen der Innenecke und der Außenecke, wo sich zwei Linien treffen.
Tipp: Die miterLimit-Eigenschaft funktioniert nur, wenn das lineJoin-Attribut "miter" ist.
Die Gehrungslänge wird größer, wenn der Winkel der Ecke kleiner wird.
Um zu verhindern, dass die Gehrungslänge zu lang wird, können wir die Eigenschaft miterLimit verwenden.
Wenn die Gehrungslänge den miterLimit-Wert überschreitet, wird die Ecke als lineJoin-Typ "bevel" angezeigt (Abb. 3):
| Standardwert: | 10 |
|---|---|
| JavaScript-Syntax: | Kontext .miterLimit= Zahl ; |
Eigenschaftswerte
| 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" |
❮ HTML-Canvas-Referenz