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