Eigenschaft miterLimit

Die Eigenschaft miterLimit reguliert die Schärfe der Verbindung zweier Linien in dem Fall, wenn die Eigenschaft lineJoin auf den Wert miter gesetzt ist. Wie reguliert sie: wenn die Länge der Ecke größer wird als die Zahl, die in miterLimit gesetzt ist, dann verhält sich die Verbindung der Linien so, als ob lineJoin auf den Wert bevel gesetzt wäre.

Standardmäßig hat miterLimit den Wert 10. Weniger als 1 kann sein Wert nicht gesetzt werden.

Syntax

Kontext.lineJoin = 'miter' oder 'round' oder 'bevel';

Beispiel

Derzeit ist die Eigenschaft lineJoin auf den Wert miter gesetzt, aber solange keine Einschränkungen gesetzt sind, ist die Ecke scharf:

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

Beispiel

Und jetzt setzen wir die Einschränkung mit Hilfe von 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();

Siehe auch

die Eigenschaft lineCap,
die das Aussehen des Linienendes festlegt