lineJoin गुण

lineJoin गुण दो रेखाओं को जोड़ने का तरीका निर्धारित करता है। यह निम्नलिखित मान ले सकता है: miter - नुकीला कोण (डिफ़ॉल्ट रूप से), round - गोल कोण, bevel - सपाट कोण।

सिंटैक्स

context.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.lineJoin = 'miter';
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();

उदाहरण

lineJoin गुण को round मान पर सेट करें:

<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.lineJoin = 'round';
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();

उदाहरण

lineJoin गुण को bevel मान पर सेट करें:

<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.lineJoin = 'bevel';
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();

यह भी देखें

miterLimit गुण,
जो नुकीले कोण की लंबाई को सीमित करता है
lineCap गुण,
जो रेखा के अंत के प्रकार को निर्धारित करता है