طريقة createRadialGradient() لـ Canvas

دليل مرجعي لـ Canvas

التعريف والاستخدام

createLinearGradient() استخدام هذه الطريقة لإنشاء كائن تدرج دائري/كروي.

يمكن استخدام التدرج لملء المثلثات، الدوائر، الخطوط، النصوص، إلخ.

إشارة:استخدم هذا الكائن كـ strokeStyle أو fillStyle قيمة الخاصية.

إشارة:استخدم addColorStop() يحدد النحو الألوان المختلفة، وكيفية تحديد موقع الألوان في كائن gradient.

مثال

رسم دائرة مستطيلة، وأملأها بتدرج دائري/كروي:

لم يتم دعم علامة 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 محيط نهاية الدائرة.

دعم المتصفح

الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم الخاصية بكاملها.

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

ملاحظة:Internet Explorer 8 وكل الإصدارات السابقة لا يدعم عنصر <canvas>.

دليل مرجعي لـ Canvas