Canvas addColorStop() মথদা
বর্ণনা ও ব্যবহার
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);
ব্রাউজার সমর্থন
তালিকায় সংখ্যা দ্বারা প্রথম সম্পূর্ণভাবে এই বৈশিষ্ট্যকে সমর্থনকারী ব্রাউজারের সংস্করণ উল্লেখ করা হয়েছে。
| চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | অপেরা |
|---|---|---|---|---|
| চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | অপেরা |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
মন্তব্যঃInternet Explorer 8 এবং তার পূর্ববর্তী সংস্করণগুলি <canvas> উপাদানটি সমর্থন করে না。
