HTML canvas createRadialGradient() 方法

定义和用法

createLinearGradient() 方法创建放射状/圆形渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示:请使用该对象作为 strokeStylefillStyle 属性的值。

提示:请使用 addColorStop() 方法规定不同的颜色,以及在 gradient 对象中的何处定位颜色。

实例

绘制一个矩形,并用放射状/圆形渐变进行填充:

Your browser does not support the HTML5 canvas tag.

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> علامت کو نہیں مددگار نہیں کراتی ہیں。