مثال
رسم مستطيل وملء مع شعاعي الانحدار / التعميم:
جافا سكريبت:
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); انها محاولة لنفسك » دعم المتصفح
الأرقام في الجدول تحدد أول نسخة مستعرض يعتمد الأسلوب بشكل كامل.
| طريقة | |||||
|---|---|---|---|---|---|
| createRadialGradient() | نعم فعلا | تسعة | نعم فعلا | نعم فعلا | نعم فعلا |
تعريف واستخدام
و createRadialGradient() الأسلوب بإنشاء / دائرية الكائن شعاعي الانحدار.
التدرج يمكن استخدامها لملء المستطيلات والدوائر والخطوط والنص، الخ
نصيحة: استخدم هذا الكائن كقيمة ل strokeStyle أو نمط ملء خصائص.
نصيحة: استخدم addColorStop() طريقة لتحديد ألوان مختلفة، وحيث لوضع الألوان في كائن التدرج.
| جافا سكريبت بناء الجملة: | context.createRadialGradient(x0,y0,r0,x1,y1,r1); |
|---|
قيم معلمة
| معامل | وصف |
|---|---|
| x0 | الإحداثي س الدائرة انطلاق التدرج |
| y0 | الإحداثي ص الدائرة انطلاق التدرج |
| r0 | نصف قطر دائرة البدء |
| x1 | الإحداثي س الدائرة انتهاء التدرج |
| y1 | الإحداثي ص الدائرة انتهاء التدرج |
| r1 | نصف قطر دائرة إنهاء |