lineCap ගුණය

lineCap ගුණය රේඛාවේ අවසානයේ පෙනුම නියම කරයි. පහත සඳහන් අගයන් ගත හැකිය: butt - සමතලා අවසානය (පෙරනිමිය ලෙස), round - වටකුරු අවසානය, square - වර්ග අවසානය.

වාක්‍ය රීතිය

context.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 ගුණය,
එය රේඛාවේ ඝණකම නියම කරයි