روش createRadialGradient() کانواس

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

createLinearGradient() با استفاده از روش ایجاد شیء تغییرات محیطی/دایره‌ای.

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

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

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

مثال

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

مرورگر شما تگ کانواس HTML5 را پشتیبانی نمی‌کند.

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 قطر دایره پایان.

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

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

کروم ایج فائرفاکس سافری آپرا
کروم ایج فائرفاکس سافری آپرا
4.0 9.0 3.6 4.0 10.1

توضیح:اینٹرنیشنل ایکسپلورر 8 اور اس سے پہلے کی نسلیں <کینووس> عناصر کو نہیں سپورٹ کرتی ہیں۔