JavaScript ဖြင့် canvas မှတစ်ဆင့် စတုဂံများ ရေးဆွဲခြင်း

စတုရန်းနှင့် စတုဂံများကို moveTo၊ lineTo တို့၏ ပေါင်းစပ်မှုဖြင့် ရေးဆွဲရန် မလိုအပ်ပါ။ ပို၍ ရိုးရှင်းသော နည်းလမ်းများ ရှိပါသည်။ ထိုနည်းလမ်းများကို လေ့လာကြပါစို့။

strokeRect နည်းလမ်း

strokeRect(x, y, အကျယ်, အမြင့်) နည်းလမ်းသည် ပေးထားသော အမှတ်တွင် စတုဂံတစ်ခု၏ အနားသတ်ကို ရေးဆွဲပေးသည်။ ပထမပါရာမီတာနှစ်ခုသည် ရေးဆွဲထားသော စတုဂံ၏ ဘယ်ဘက်အပေါ်ထောင့် ရှိမည့်အမှတ်၏ ကိုဩဒိနိတ်များကို သတ်မှတ်ပေးသည်။

strokeRect ကို အသုံးပြု၍ စတုဂံတစ်ခု ရေးဆွဲကြည့်ပါမည် (ctx ရှိပြီးသားဟု ယူဆပါသည်)။

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

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

ctx.strokeRect(50, 50, 100, 75);

Результат:

fillRect နည်းလမ်း

fillRect(x, y, အကျယ်, အမြင့်) နည်းလမ်းသည် strokeRect ကဲ့သို့ပင် အလုပ်လုပ်သော်လည်း အရောင်ဖြည့်ထားသော စတုဂံကို ရေးဆွဲပေးသည်။ နမူနာဖြင့် ကြည့်ရှုကြပါစို့။

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

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

ctx.fillRect(50, 50, 100, 75);

Результат:

rect နည်းလမ်း

နောက်ထပ် နည်းလမ်း rect(x, y, အကျယ်, အမြင့်) သည်လည်း စတုဂံတစ်ခုကို ရေးဆွဲပေးသည်။ သို့သော် stroke သို့မဟုတ် fill နည်းလမ်းကို အသုံးပြုမှသာ ဤစတုဂံကို မြင်တွေ့နိုင်မည် ဖြစ်သည်။ ပထမအခြေအနေတွင် အနားသတ်ဖြစ်မည်၊ ဒုတိယအခြေအနေတွင် ပုံသဏ္ဍာန်ဖြစ်မည်။

rect ကို အသုံးပြု၍ အနားသတ်တစ်ခု ရေးဆွဲကြည့်ပါမည်။

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

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

ctx.rect(50, 50, 100, 75);
ctx.stroke();

Результат:

ယခု ပုံသဏ္ဍာန်တစ်ခုကို ရေးဆွဲကြည့်ပါမည်။

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

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

ctx.rect(50, 50, 100, 75);
ctx.fill();

Результат:

clearRect နည်းလမ်း

နောက်ထပ် နည်းလမ်း clearRect(x, y, အကျယ်, အမြင့်) သည် ခဲဖျက်ကဲ့သို့ အလုပ်လုပ်ကာ စတုဂံပုံသဏ္ဍာန် နေရာတစ်ခုကို ရှင်းလင်းပြီး ပါဝင်သောအရာကို အလွန်ပင်း၍ ဖော်ပြပေးသည်။

fillRect ဖြင့် စတုရန်းငယ်တစ်ခုကို ရေးဆွဲပြီး clearRect ဖြင့် ၎င်း၏ အစိတ်အပိုင်းတစ်ခုကို ဖျက်ကြည့်ပါမည်။

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

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

ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);

Результат: