Eigenschap miterLimit

De eigenschap miterLimit regelt de scherpte van de verbinding tussen twee lijnen in het geval dat de eigenschap lineJoin is ingesteld op de waarde miter. Hoe het regelt: als de lengte van de hoek groter wordt dan het getal ingesteld in miterLimit, dan gedraagt de verbinding van lijnen zich alsof lineJoin is ingesteld op de waarde bevel.

Standaard heeft miterLimit de waarde 10. Minder dan 1 kan de waarde niet worden ingesteld.

Syntaxis

context.lineJoin = 'miter' of 'round' of 'bevel';

Voorbeeld

Momenteel is de eigenschap lineJoin ingesteld op de waarde miter, maar zolang er geen beperkingen zijn, is de hoek scherp:

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

Voorbeeld

En nu stellen we een beperking in met behulp van 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();

Zie ook

eigenschap lineCap,
die het uiterlijk van het einde van een lijn bepaalt