JavaScript ဖြင့် canvas တွင် လိုင်းအရောင်ပြောင်းခြင်း

အခု စုတ်ကြောင်းနှင့် အတွင်းဖြည့်အရောင် ပြောင်းနည်းကို သင်ကြရအောင်။ ထိုသို့ပြုလုပ်ရန် အောက်ပါဂုဏ်သတ္တိများရှိသည်- ဂုဏ်သတ္တိ strokeStyle သည် စုတ်ကြောင်းအရောင်ကို သတ်မှတ်ပေးပြီး၊ ဂုဏ်သတ္တိ fillStyle သည် အတွင်းဖြည့်အရောင်ကို သတ်မှတ်ပေးသည်။ အရောင်များကို သာမန် CSS ပုံစံဖြင့် သတ်မှတ်ပါသည်။

ဥပမာ

အခု 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, 100);
ctx.strokeStyle = 'red';
ctx.stroke();

Результат:

ဥပမာ

အခု 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, 100);
ctx.fillStyle = 'green';
ctx.fill();

Результат:

မှတ်စု

အရေးကြီးသည်မှာ- သင်သည် strokeStyle သို့မဟုတ် fillStyle ကို သတ်မှတ်သောအခါ၊ အသစ်သတ်မှတ်လိုက်သည့်တန်ဖိုးသည် ယခုအချိန်မှစ၍ ရေးဆွဲခြင်းခံရမည့် ပုံသဏ္ဍာန်အားလုံးအတွက် အကျိုးသက်ရောက်မည်ဖြစ်သည်။ အခြားအရောင်တစ်မျိုးလိုအပ်သည့် ပုံသဏ္ဍာန်တိုင်းအတွက်၊ သင်သည် fillStyle သို့မဟုတ် strokeStyle ၏တန်ဖိုးကို ပြန်လည်အစားထိုးသတ်မှတ်ပေးရမည်။

လက်တွေ့လေ့ကျင့်ခန်းများ