HTML canvas createLinearGradient() পদ্ধতি
নির্ধারণ ও ব্যবহার
createLinearGradient() পদ্ধতি একটি লাইনার গ্রেডিয়েন্ট অবজেক্ট তৈরি করে。
গ্রেডিয়েন্ট চতুর্ভুজ, বক্স, লাইন, টেক্সট ইত্যাদির পূর্ণাঙ্গ শৈলী হিসাবে ব্যবহার করা যেতে পারে。
সুঝাওয়া:এই অবজেক্ট হিসাবে ব্যবহার করুন: strokeStyle বা fillStyle প্রতিভার মান
সুঝাওয়া:ব্যবহার করুন: addColorStop() পদ্ধতি নির্দিষ্ট বিভিন্ন রং এবং gradient অবজেক্টের কোথায় রং স্থাপন করে。
প্রতিমান
আরও দেখুন:
একটি কালো থেকে সাদা পর্যন্ত গ্রেডিয়েন্ট (ডান থেকে বাঁদ) নির্ধারণ করে, যা চতুর্ভুজের পূর্ণাঙ্গ শৈলী হিসাবে ব্যবহার করা হবে:
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 | গ্রেডিয়েন্ট শুরু বিন্দুর x অক্ষত্ব |
| y0 | গ্রেডিয়েন্ট শুরু বিন্দুর y অক্ষত্ব |
| x1 | গ্রেডিয়েন্ট শুরু বিন্দুর x অক্ষত্ব |
| y1 | গ্রেডিয়েন্ট শেষ বিন্দুর y অক্ষত্ব |
আরও প্রতিমান
প্রতিমান 2
একটি গ্রেডিয়েন্ট (উপর থেকে নীচে) নির্ধারণ করে, যা চতুর্ভুজের পূর্ণাঙ্গ শৈলী হিসাবে ব্যবহার করা হবে:
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
একটি কালো থেকে লাল এবং সাদা পর্যন্ত গ্রেডিয়েন্ট নির্ধারণ করে, যা চতুর্ভুজের পূর্ণাঙ্গ শৈলী হিসাবে ব্যবহার করা হবে:
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);
ব্রাউজার সমর্থন
তালিকায় সংখ্যা এই ব্রাউজারগুলির প্রথম পূর্ণাঙ্গ সমর্থনকারী সংস্করণ উল্লেখ করা হয়েছে。
| চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | ওপেরা |
|---|---|---|---|---|
| চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | ওপেরা |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
মন্তব্য:ইন্টারনেট এক্সপ্লোরার ৮ এবং তার পূর্ববর্তী সংস্করণগুলি <canvas> ইলেকট্রন সমর্থন করে না。
