HTML canvas createLinearGradient() ဘက်တူ အရာ

HTML5 Canvas 参考手册

အသုံးပြုနည်း နှင့် အကျိုးသက်

createLinearGradient() အပြောင်းအလဲ အပြင်ဘက် ပြုလုပ်ရန် ဘက်တူ အရာ ပြုလုပ်ရန်

အပြောင်းအလဲ ကို အပြင်ဘက် ပြုလုပ်ရန် သို့မဟုတ် အရှည်အကြာ ပြုလုပ်ရန် သို့မဟုတ် အစက်ရှိ အရာ ပြုလုပ်ရန် သို့မဟုတ် အခြား အရာ ပြုလုပ်ရန်

အဆိုပါ အရာ သုံးပြီးအဆိုပါ အရာ သုံးပြီး strokeStyle သို့မဟုတ် fillStyle အဆိုပါ အရာ သုံးပြီး

အဆိုပါ အရာ သုံးပြီးအဆိုပါ အရာ သုံးပြီး addColorStop() ဘက်တူ အမြင့်အရောင် အချင်းချင်း သဘောပြု၍ အပြောင်းအလဲ ကို သဘောပြု၍ အပြောင်းအလဲ ကို သဘောပြု၍

အကျယ်အဝန်း

ပြင့်ပြီး လေ့လာခြင်း

အမြင့်အရောင် ပြင်းစွာ သို့မဟုတ် အနီအတွင်း ပြင်းစွာ သဘောပြု၍ အရွယ်အစား ပြင်းစွာ သဘောပြု၍ အမြင့်အရောင် အပြောင်းအလဲ ကို ပြင့်ပြီး ယိုးဒိမ်ကို ပြုလုပ်ရန်

Your browser does not support the HTML5 canvas tag.

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(သုံးသပ်,သုံးသပ်,y0,y1);

သုံးသပ်

သုံးသပ် သုံးသပ်
သုံးသပ် သုံးသပ်
သုံးသပ် x0
y0 x1
y1 အပြောင်းအလဲ အပိုင်းအခြာ အမြင့်အရောင် ရွှေ့ပြောင်း သွားရာ အမြင့်အရောင် ရွှေ့ပြောင်း သွားရာ အမြင့်အရောင် ရွှေ့ပြောင်း သွားရာ အမြင့်အရောင် ရွှေ့ပြောင်း သွားရာ အမြင့်အရောင် ရွှေ့ပြောင်း သွားရာ

အကျယ်အဝန်း ပေါင်း

အကျယ်အဝန်း 2

အမြင့်အရောင် အပြောင်းအလဲ ကို ပြင့်ပြီး ယိုးဒိမ်ကို ပြုလုပ်ရန်

Your browser does not support the canvas tag.

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

ကိုယ်လူမျိုးမှ အမြင့်အရောင် ပြင်းစွာ သို့မဟုတ် အနီအတွင်း ပြင်းစွာ သို့ သဘောပြု၍ အရွယ်အစား သဘောပြု၍ အမြင့်အရောင် အပြောင်းအလဲ ကို ပြင့်ပြီး ယိုးဒိမ်ကို ပြုလုပ်ရန်

Your browser does not support the canvas tag.

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 以及更早的版本不支持 元素。

HTML5 Canvas 参考手册