Canvas createLinearGradient() စနစ်

Canvas ဂဏန်းစာအုပ်

ဒီ အသုံးချင်း နှင့် အပြုအမူ

createLinearGradient() ဘာသာစကားသုံးစံ ကို အသုံးပြုပါ အရောင်ပြောင်းလဲသုံးစံ အား လက်ဆုံးပြင်တွင် အသုံးပြုရန်

gradient အား လက်ဆုံးပြင်တွင် အသုံးပြုရန် နှင့် အဆိုင် ပုံစံများကို အသုံးပြုနိုင်ပါ

အဆိုင်အားစိုက် strokeStyle သို့မဟုတ် fillStyle အချက်အလက်

အဆိုင်အဆိုင် addColorStop() ဘာသာစကားသုံးစံ ကို အသုံးပြုပါ အရောင် နှင့် gradient အားစိုက်အားစိုက်တွင် အရောင်တွင်းသို့ ထိထွက်ပေးရန် ဘာသာစကားသုံးစံ

ဌာန

အခြား သုံးစွဲသုံးစံ

အကြီးထိုး မှ အနည်းဆုံး အထိ ဖြင့် ဖြူ မှ အနည်းဆုံး အထိ အရောင်ပြောင်းလဲသုံးစံ (အဆိုင် အတိုင်း သို့) ကို လက်ဆုံးပြင်တွင် အသုံးပြုရန် အသုံးပြုပါ

သင်၏ ဘာသာစကားသုံးစံမှာ HTML5 canvas အချက်အလက်ကို ထောက်ပံ့မှုမရှိပါ

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);

ကိုယ်တိုင် ကူးကြမ်းကြည့်ပါ

အက္ခရာ

context.createLinearGradient(x0,y0,x1,y1);

အပါအဝင် ပြင်းအား

အပါအဝင် ဖော်ပြ
x0 အရောင်ပြောင်းလဲသုံးစံ၏ စတင်အကွာ
y0 အရောင်ပြောင်းလဲသုံးစံ၏ စတင်အမြင့်
x1 အရောင်ပြောင်းလဲသုံးစံ၏ အဆုံးပိုင်းအကွာအတွင်း
y1 အရောင်ပြောင်းလဲသုံးစံ၏ အဆုံးပိုင်းအမြင့်အား

ပိုမိုသုံးစွဲသုံးစံ

ဌာန 2

အရောင်ပြောင်းလဲသုံးစံ (အထက်မှ အောက်သို့) ကို လက်ဆုံးပြင်တွင် အသုံးပြုရန် အသုံးပြုပါ

သင်၏ ဘာသာစကားသုံးစံမှာ canvas အချက်အလက်ကို ထောက်ပံ့မှုမရှိပါ

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

ကိုယ်တိုင် ကူးကြမ်းကြည့်ပါ

ဌာန 3

အကြီးထိုး မှ အနည်းဆုံး အထိ ဖြင့် ပြန်လည်သုံးစံကို လက်ဆုံးပြင်တွင် အသုံးပြုရန် အသုံးပြုပါ

သင်၏ ဘာသာစကားသုံးစံမှာ canvas အချက်အလက်ကို ထောက်ပံ့မှုမရှိပါ

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
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 နှင့် ပိုမိုသေးငယ်သော ပုံစံ အရ <canvas> အခြေအနေ ကို လုပ်ကျင်တော်မူခြင်း မရှိဘဲ။

Canvas ဂဏန်းစာအုပ်