HTML canvas createRadialGradient() 方法
定义和用法
createLinearGradient()
方法创建放射状/圆形渐变对象。
渐变可用于填充矩形、圆形、线条、文本等等。
提示:请使用该对象作为 strokeStyle 或 fillStyle 属性的值。
提示:请使用 addColorStop() 方法规定不同的颜色,以及在 gradient 对象中的何处定位颜色。
实例
绘制一个矩形,并用放射状/圆形渐变进行填充:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,100);
গঠনকার্য
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
পারামিটারের মান
পারামিটার | বর্ণনা |
---|---|
x0 | গ্রেডিয়েন্ট শুরুর চুপুরীর x অক্ষের সমস্থান |
y0 | গ্রেডিয়েন্ট শুরুর চুপুরীর y অক্ষের সমস্থান |
r0 | গ্রেডিয়েন্ট শুরুর চুপুরীর দৈর্ঘ্য |
x1 | গ্রেডিয়েন্ট চুপুরীর x অক্ষের সমস্থান |
y1 | গ্রেডিয়েন্ট চুপুরীর y অক্ষের সমস্থান |
r1 | চুপুরীর রেখার দৈর্ঘ্য |
ব্রাউজার সমর্থন
সারণীতে নম্বরগুলি প্রথমবার যেই ব্রাউজারের সংস্করণটি এই এক্সিফার্টটি সম্পূর্ণভাবে সমর্থন করে, তা উল্লেখ করা হয়。
চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | অপেরা |
---|---|---|---|---|
চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | অপেরা |
4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
মন্তব্য:ইন্টারনেট এক্সপ্লোরার 8 এবং তার পূর্ববর্তী সংস্করণগুলি <canvas> ইলেকট্রন সমর্থন করে না。