लाइनकैप गुण

lineCap गुण लाइन के अंत के प्रकार को निर्धारित करता है। यह निम्नलिखित मान ले सकता है: butt - फ्लैट अंत (डिफ़ॉल्ट रूप से), round - गोल अंत, square - वर्गाकार अंत।

सिंटैक्स

context.lineCap = 'butt' or 'round' or '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 गुण,
जो लाइन की मोटाई निर्धारित करता है