miterLimit касиети

miterLimit касиети, lineJoin касиети miter маанисине коюлган учурда эки сызыктын кошулган жеринин өткүрлүгүн жөнгө салат. Ал кандайча жөнгө салат: эгерде бурчтун узундугу miterLimitте белгиленген сандан чоңураак болсо, анда сызыктардын кошулушу lineJoin касиети bevel маанисине коюлгандай жүрүм-турумга ээ болот.

Демейки абалда miterLimitтин мааниси 10. Анын маанисин 1ден төмөн коюуга болбойт.

Синтаксис

контекст.lineJoin = 'miter' же 'round' же 'bevel';

Мисал

Азыр lineJoin касиети miter маанисине коюлган, бирок азырынча эч кандай чектөө жок, бурч өткүр:

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

Мисал

Эми болсо, 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();

Ошондой эле караңыз

сызыктын учунun көрүнүшүн белгилей турган lineCap касиети,