Својството lineCap

Својството lineCap го поставува изгледот на крајот на линијата. Може да ги прифати следните вредности: butt - рамен крај (по стандард), round - заоблен крај, square - квадратен крај.

Синтакса

контекст.lineCap = 'butt' или 'round' или 'square';

Пример

Ајде да нацртаме неколку линии и на првата да ја поставиме вредноста butt, на втората - round, на третата - square. Обрнете внимание на црвената линија - таа ја означува поставената почетна точка на линијата (додека round и square излегуваат надвор од неа):

<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.lineCap = 'butt';
ctx.moveTo(75, 50);
ctx.lineTo(75, 150);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = 'round';
ctx.moveTo(105, 50);
ctx.lineTo(105, 150);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = 'square';
ctx.moveTo(135, 50);
ctx.lineTo(135, 150);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 1;
ctx.lineCap = 'butt';
ctx.strokeStyle = 'red';
ctx.moveTo(60, 50);
ctx.lineTo(150, 50);
ctx.stroke();

Погледнете ги исто така

својството lineJoin,
кое го поставува стилот на прекршување на линијата
својството miterLimit,
кое ја ограничува должината на остар агол
својството lineCap,
кое го поставува изгледот на крајот на линијата
својството lineWidth,
кое ја поставува дебелината на линијата