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

javascriptkonteks.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:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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