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 ဂုဏ်သတ္တိ၊
အရာသည် မျဉ်း၏ အဆုံးပုံစံကို သတ်မှတ်ပေးသည်