HTML Canvas Gradients
ကင်းဗတ် - Gradients
Gradiments များကို ထောင့်မှန်စတုဂံများ၊ စက်ဝိုင်းများ၊ မျဉ်းကြောင်းများ၊ စာသား စသည်တို့ကို ဖြည့်ရန် အသုံးပြုနိုင်သည်။ ပတ္တူပေါ်ရှိ ပုံသဏ္ဍာန်များသည် အစိုင်အခဲအရောင်များအတွက် အကန့်အသတ်မရှိပါ။
gradient အမျိုးအစား နှစ်မျိုးရှိသည်။
- createLinearGradient( x,y,x1,y1 ) - linear gradient ကို ဖန်တီးသည်
- createRadialGradient( x,y,r,x1,y1,r1 ) - အချင်းများ/စက်ဝိုင်းပုံ အရောင်အသွေးကို ဖန်တီးသည်
ကျွန်ုပ်တို့တွင် gradient object တစ်ခုရှိသည်နှင့်၊ ကျွန်ုပ်တို့သည် နှစ်ခု သို့မဟုတ် ထို့ထက်ပိုသော အရောင်မှတ်တိုင်များကို ထည့်ရပါမည်။
addColorStop() method သည် အရောင်ရပ်တန့်မှုများနှင့် gradient တစ်လျှောက် ၎င်း၏ အနေအထားကို သတ်မှတ်ပေးသည်။ Gradient အနေအထားများသည် 0 မှ 1 ကြားရှိနိုင်ပါသည်။
gradient ကို အသုံးပြုရန်၊ fillStyle သို့မဟုတ် strokeStyle ပိုင်ဆိုင်မှုကို gradient သို့ သတ်မှတ်ပြီးနောက် ပုံသဏ္ဍာန် (စတုဂံ၊ စာသား သို့မဟုတ် စာကြောင်း) ကို ဆွဲပါ။
createLinearGradient() ကိုအသုံးပြုခြင်း
ဥပမာ
linear gradient ဖန်တီးပါ။ gradient ဖြင့် ထောင့်မှန်စတုဂံကို ဖြည့်ပါ
JavaScript-
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
createRadialGradient():
ဥပမာ
အချင်းများ/ စက်ဝိုင်းပုံ gradient ဖန်တီးပါ။ gradient ဖြင့် ထောင့်မှန်စတုဂံကို ဖြည့်ပါ
JavaScript-
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);