ලයින් ජොයින් ගුණාංගය

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 ගුණාංගය,
එය රේඛාවක අවසානයේ හැඩය නියම කරයි