Die miterLimit Eienskap

Die eienskap miterLimit reguleer die skerpte van die verbinding tussen twee lyne in die geval waar die eienskap lineJoin op die waarde miter gestel is. Hoe dit reguleer: indien die lengte van die hoek groter word as die getal wat in miterLimit gespesifiseer is, dan gedra die lynverbinding hom asof lineJoin op die waarde bevel gestel is.

By verstek het miterLimit die waarde 10. Dit kan nie op minder as 1 gestel word nie.

Sintaksis

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

Voorbeeld

Tans is die eienskap lineJoin op die waarde miter gestel, maar daar is nog geen beperkings nie, die hoek is skerp:

<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 nou stel ons die beperking 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();

Sien ook

die eienskap lineCap,
wat die voorkoms van die lyn se einde spesifiseer