HTML ဂရမ်း အပူဇော်

အဆိုင်းအတံ့ - အဆန့်တူသော အရောင်

အဆန့်တူသော အရောင် သုံး၍ ပုံများ (အဆိုင်းအတံ့, အဆိုင်းအဝိုင်း, အကြောင်းဝင် သို့မဟုတ် အခြား အရေးအချင်း) ကို ပြုလုပ် နိုင်ပါ

အဆန့်တူသော အရောင် အမျိုးအစား နှစ်မျိုး ရှိပါတယ်

  • createLinearGradient(x,y,x1,y1) - အဆန့်တူသော အရောင် ဖန်တီး
  • createRadialGradient(x,y,r,x1,y1,r1) - အဆန့်တူသော အရောင် ဖန်တီး

အဆန့်တူသော အရောင် အား ဖြင့် အဆန့်တူသော အရောင် အချက်အလက် ကို ပြုလုပ် ပြီး အဆန့်တူသော အရောင် အား အသုံးပြု ပါ

addColorStop() နည်းပါး သည် အရောင် ရပ်ရန် နှင့် အဆန့်တူသော အရောင် အတွင်း အရောင် ရပ်နေသော စက်တင် ကို သတ်မှတ်ပါ

အဆန့်တူသော အရောင် သုံး၍ ပြုလုပ် သတ်မှတ် ပုံဖြင့် fillStyle သို့မဟုတ် strokeStyle အရေးအချင်း ကို အသုံးပြု ပြီး ပုံများ (အဆိုင်းအတံ့, အခြား အရေးအချင်း သို့မဟုတ် အကြောင်းဝင်) ကို ဖြင့်လုပ်ပေးပါ

Canvas - အဆန့်တူသော အရောင်

createLinearGradient() ကို အသုံးပြု

အမှတ်

အဆန့်တူသော အရောင် ဖန်တီး ပုံဖြင့်

သင်၏ ဘရောက်သုတ် က အိပ်ခတ် 5 ကုန်း အချက်အလက် ကို လုပ်ခဲ့တယ်。

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// အဆန့်တူသော အရောင် ဖန်တီး
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// အဆန့်တူသော အရောင် ပြုလုပ်
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

亲自试一试

createRadialGradient() ကို အသုံးပြု

အမှတ်

အဆန့်တူသော အရောင် သုံး၍ အဆိုင်းအတံ့ ပြုလုပ် ပုံဖြင့်

သင်၏ ဘရောက်သုတ် က အိပ်ခတ် 5 ကုန်း အချက်အလက် ကို လုပ်ခဲ့တယ်。

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// အဆန့်တူသော အရောင် ဖန်တီး
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// အဆန့်တူသော အရောင် ပြုလုပ်
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

亲自试一试

另请参阅：

CodeW3C.com 的完整 Canvas 参考手册