miterLimit ဂုဏ်သတ္တိ

miterLimit ဂုဏ်သတ္တိသည် lineJoin ဂုဏ်သတ္တိကို miter တန်ဖိုးအဖြစ် သတ်မှတ်ထားသည့်အခါ လိုင်းနှစ်ကြောင်း ဆက်သွယ်မှု၏ အသွားချွန်မှုကို ထိန်းညှိပေးသည်။ မည်သို့ထိန်းညှိသနည်း - ထောင့်၏အရှည်သည် miterLimit တွင် သတ်မှတ်ထားသော ဂဏန်းထက် ပိုရှည်လာပါက၊ လိုင်းများဆက်သွယ်မှုသည် lineJoin ကို bevel တန်ဖိုးအဖြစ် သတ်မှတ်ထားသကဲ့သို့ ပြုမူသည်။

စံထားရာ အဖြစ် miterLimit သည် 10 တန်ဖိုးရှိသည်။ 1 ထက်နည်းသော တန်ဖိုးကို ၎င်း၌ သတ်မှတ်၍မရပါ။

ဝါကျဖွဲ့စည်းပုံ

javascriptcontext.lineJoin = 'miter' သို့မဟုတ် 'round' သို့မဟုတ် 'bevel';

နမူနာ

ယခု lineJoin ဂုဏ်သတ္တိကို miter တန်ဖိုးအဖြစ် သတ်မှတ်ထားသော်လည်း ကန့်သတ်ချက်များ မရှိသေးသဖြင့် ထောင့်သည် ချွန်နေသည် -

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();

Результат:

နမူနာ

ယခု miterLimit ဖြင့် ကန့်သတ်ချက်တစ်ခု သတ်မှတ်ကြည့်ပါမည် -

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.lineWidth = 10;
ctx.miterLimit = 1;
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();

Результат:

ဤအကြောင်းကိုလည်း ကြည့်ပါ