مетод HTML canvas createRadialGradient()

دستورالعمل‌های HTML5 Canvas

تعریف و استفاده

createLinearGradient() مетод برای ایجاد شیء محدب/گردان‌گونه‌ی رنگی استفاده می‌شود.

محدب می‌توان برای پر کردن مستطیل‌ها، دایره‌ها، خطوط، متن و غیره استفاده کرد.

توضیح:این شیء را به عنوان strokeStyle یا fillStyle مقدار این ویژگی استفاده کنید.

توضیح:لطفاً از addColorStop() این روش رنگ‌ها را تعیین می‌کند و رنگ‌ها را در کجا قرار می‌دهد در داخل شیء gradient.

مثال

یک مستطیل بکشید و آن را با استفاده از محدب/گردان‌گونه‌ی رنگی پر کنید:

مرورگر شما پشتیبانی از تگ HTML5 canvas را ندارد.

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");
// با استفاده از رنگ‌های محدب
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 شعاع پایان دایره

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی هستند که از این ویژگی پشتیبانی می‌کنند.

Chrome Edge Firefox Safari opera
Chrome Edge Firefox Safari opera
4.0 9.0 3.6 4.0 10.1

توجه:نسخه‌های 8 و قدیمی‌تر اینترنت اکسپلورر از عنصر <canvas> پشتیبانی نمی‌کنند.

دستورالعمل‌های HTML5 Canvas