Canvas ပေါင်းစပ်ရေး စက်မှု
ဖော်ပြခြင်း နှင့် အသုံးပြုခြင်း
addColorStop() မူကြမ်း အရ gradient အား အရောင် နှင့် စက်တင်စက်ပေးသည်
addColorStop() များ နှင့် createLinearGradient() နှင့် createRadialGradient() တစ်ခုနှင့် တစ်ခု အပေါ်
အစီရင်ခံaddColorStop() များ ကို အသုံးပြု၍ ပြောင်းလဲမှု ကို ပြောင်းလဲစွာ အသုံးပြုနိုင်ပါ။ gradient အား ထိုမျှသာ အသုံးပြုဘဲ မေ့မရှိဘဲ ဖြစ်လာမည် ဖြစ်စေ ပြောင်းလဲမှု ကို မြင်တွေ့နိုင်သည် မဟုတ်။ ပြောင်းလဲမှု ကို မြင်တွေ့နိုင်ရန် အလို့ငှာ အရောင် အချက်အလက် တစ်ခု အထိ ဖန်တီးရမည်
အမျိုးအစား
အမှတ် 1
အရောင် မှ အမြောက်အမြား အထိ ပြောင်းလဲမှု ကို အသုံးပြု၍ သတ္တုတိုင်း အကုန်ကြောင်း ဖော်ပြပါ
JavaScript:
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
အကြံပေးချက်:စားပွဲဝက် တွင် ပိုမိုသုံးစွဲနိုင်သော အကျိုးဖြစ်နိုင်သော အမျိုးအစား
ပုံစံ
gradient.addColorStop(stop,color);
အရာအတိုင်း
| အရာ | ဖော်ပြ |
|---|---|
| stop | 0.0 နှင့် 1.0 အကြား နေသော အတိုင်း အတိုး အရ ပြောင်းလဲမှု ကို အချက်ပြသည် |
| color | အပြီးစဉ် တွင် ပြသထားသော CSS အရောင် အတိုင်း |
ပိုမိုသုံးစွဲနိုင်သော အကျိုးဖြစ်နိုင်သော အမျိုးအစား
အမှတ် 2
အသုံးပြုထားသော addColorStop() များ ဖြင့် ပြောင်းလဲမှု ကို အသုံးပြုပါ
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
ဘရပ်ဖြူတာ အထူးအောင်မြင် မူကြမ်း
ပြင့်ပေါ်တွင် ဖော်ပြထားသော စက္ကူများ သည် ထိုအခြေအနေအထား ကို အထူးအောင်မြင် သုံးစွဲနိုင်သော ဘရပ်ဖြူတာ အစားအလာ ကို ဖော်ပြသည်。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
အစီရင်ခံInternet Explorer 8 နှင့် အရှိန်ကြီးသော ကန်ပြန် အပျက်အစီး မပေးထားပါ။
