Својство miterLimit

Својство miterLimit регулише оштрину спајања две линије у случају када је својство lineJoin задато у вредност miter. Како регулише: ако дужина угла постане већа од броја заданог у miterLimit, онда се спој линија понаша као да је lineJoin задат у вредност bevel.

Подразумевано miterLimit има вредност 10. Мање од 1 његова вредност се не може поставити.

Синтакса

javascriptконтекст.lineJoin = 'miter' или 'round' или 'bevel';

Пример

Сада је својство lineJoin постављено на вредност miter, али засад нема ограничења, угао је оштар:

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

Результат:

Пример

А сада ћемо поставити ограничење помоћу 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();

Результат:

Погледајте такође