Signatur
Beschreibung
Die Eigenschaft miterLimit gilt nur, wenn lineJoin auf "miter" steht (das ist der Standardwert). Treffen zwei Liniensegmente in einem spitzen Winkel aufeinander, entsteht an der Außenseite eine lange Spitze, die Gehrung (englisch „miter“). Ihre Länge wird vom inneren bis zum äußeren Eckpunkt gemessen. Das Verhältnis aus dieser Länge und der halben Linienbreite (lineWidth / 2) nennt man Gehrungsverhältnis. Überschreitet es miterLimit, zeichnet der Browser die Ecke stattdessen abgeschrägt wie bei lineJoin = "bevel".
Der Standardwert ist 10.0. Damit werden Ecken ab einem Winkel von etwa 11,5° abgeschrägt. Mit einem kleineren Wert werden auch stumpfere Ecken abgeschrägt, mit einem größeren Wert bleiben selbst sehr spitze Ecken spitz. Das Verhältnis hängt vom Winkel θ zwischen den Segmenten ab: 1 / sin(θ / 2).
Die Eigenschaft ist nützlich für Diagramme mit Zickzack-Verläufen (zum Beispiel Kurs- oder Pulskurven), für Sterne und Pfeilspitzen und überall dort, wo dicke Linien mit spitzen Winkeln keine übermäßig langen „Stacheln“ bilden sollen. Der Wert gehört zum Zeichenzustand und wird deshalb mit save() und restore() gesichert und wiederhergestellt.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | number | 10 | Neues Gehrungsverhältnis. Nur endliche Zahlen größer als 0 sind gültig. Andere Werte werden ignoriert. |
Rückgabewert
10.Beispiele
Standardwert lesen und neuen Wert setzen
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
console.log(ctx.miterLimit); // Standardwert
ctx.miterLimit = 4;
console.log(ctx.miterLimit);
// Ungültige Werte werden ignoriert
ctx.miterLimit = -1;
ctx.miterLimit = 0;
ctx.miterLimit = NaN;
console.log(ctx.miterLimit);Zickzack-Linie mit verschiedenen Miter-Limits vergleichen
const canvas = document.querySelector('#demo');
const ctx = canvas.getContext('2d');
const zickzack = (offsetX, limit) => {
ctx.save();
ctx.lineWidth = 12;
ctx.lineJoin = 'miter';
ctx.miterLimit = limit;
ctx.strokeStyle = '#1565c0';
ctx.beginPath();
ctx.moveTo(offsetX, 150);
for (let i = 1; i <= 4; i++) {
// spitze Winkel durch kleine horizontale Schritte
ctx.lineTo(offsetX + i * 15, i % 2 ? 40 : 150);
}
ctx.stroke();
ctx.restore();
};
zickzack(20, 1); // alle Ecken abgeschrägt
zickzack(120, 5); // teilweise abgeschrägt
zickzack(220, 20); // lange, spitze EckenNötiges Miter-Limit für einen Winkel berechnen
// Gehrungsverhältnis = 1 / sin(θ / 2)
const miterRatio = (winkelGrad) => 1 / Math.sin((winkelGrad * Math.PI / 180) / 2);
const ctx = document.createElement('canvas').getContext('2d');
// Ein Stern mit 36°-Spitzen soll spitz bleiben
const benoetigt = miterRatio(36);
ctx.miterLimit = Math.ceil(benoetigt * 100) / 100;
console.log(benoetigt.toFixed(3));
console.log(ctx.miterLimit);// Wichtig · Fallstricke
- Wirkt nur bei
lineJoin = "miter": Bei"round"oder"bevel"hatmiterLimitkeinen Einfluss. - Ungültige Werte werden stillschweigend ignoriert: Bei
0, negativen Zahlen,NaNoderInfinitywird kein Fehler geworfen, der alte Wert bleibt einfach bestehen. - Kein Kappen, sondern Umschalten: Wird das Limit überschritten, schneidet der Browser die Spitze nicht auf die erlaubte Länge ab (anders als bei
miter-clipin SVG 2), sondern zeichnet die ganze Ecke abgeschrägt. Die Ecke kann deshalb sprunghaft ihre Form ändern, wenn sich der Winkel nur leicht ändert. - Hohe Werte: Sehr große Limits bei dicken Linien und fast parallelen Segmenten ergeben extrem lange Spitzen, die weit aus dem erwarteten Bereich herausragen und auch abgeschnitten werden können.
- Gilt ebenso für
OffscreenCanvasRenderingContext2DundPath2D-Striche. Wird in allen modernen Browsern unterstützt.