JavaScript ဖြင့် canvas တွင် လိုင်းအရောင်ပြောင်းခြင်း
အခု စုတ်ကြောင်းနှင့် အတွင်းဖြည့်အရောင် ပြောင်းနည်းကို သင်ကြရအောင်။
ထိုသို့ပြုလုပ်ရန် အောက်ပါဂုဏ်သတ္တိများရှိသည်-
ဂုဏ်သတ္တိ strokeStyle သည်
စုတ်ကြောင်းအရောင်ကို သတ်မှတ်ပေးပြီး၊ ဂုဏ်သတ္တိ fillStyle
သည် အတွင်းဖြည့်အရောင်ကို သတ်မှတ်ပေးသည်။ အရောင်များကို သာမန်
CSS
ပုံစံဖြင့် သတ်မှတ်ပါသည်။
ဥပမာ
အခု rect ကို အသုံးပြု၍ စုတ်ကြောင်းတစ်ခု ရေးဆွဲကြည့်ပြီး
၄င်းကို အနီရောင်ဖြင့် ခြယ်ကြည့်ရအောင်-
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();
:
ဥပမာ
အခု rect ကို အသုံးပြု၍ စတုရန်းပုံတစ်ခု ရေးဆွဲကြည့်ပြီး
၄င်းကို အစိမ်းရောင်ဖြင့် ဖြည့်ကြည့်ရအောင်-
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();
:
မှတ်စု
အရေးကြီးသည်မှာ- သင်သည် strokeStyle
သို့မဟုတ် fillStyle ကို သတ်မှတ်သောအခါ၊
အသစ်သတ်မှတ်လိုက်သည့်တန်ဖိုးသည် ယခုအချိန်မှစ၍
ရေးဆွဲခြင်းခံရမည့် ပုံသဏ္ဍာန်အားလုံးအတွက် အကျိုးသက်ရောက်မည်ဖြစ်သည်။
အခြားအရောင်တစ်မျိုးလိုအပ်သည့် ပုံသဏ္ဍာန်တိုင်းအတွက်၊
သင်သည် fillStyle သို့မဟုတ် strokeStyle
၏တန်ဖိုးကို ပြန်လည်အစားထိုးသတ်မှတ်ပေးရမည်။
