قناة addColorStop()

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

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

addColorStop() يحدد طريقة gradient اللون والموقع في كائن gradient.

طريقة addColorStop() مع createLinearGradient() أو createRadialGradient() استخدام معًا.

ملاحظة:يمكنك تكرار استدعاء طريقة addColorStop() لتغيير التدرج. إذا لم تستخدم هذه الطريقة على كائن gradient، فإن التدرج سيكون غير مرئي. للحصول على تدرج مرئي، تحتاج إلى إنشاء على الأقل إحدى العلامات اللونية.

مثال

مثال 1

تعريف تدرج من الأسود إلى الأبيض كنمط ملء المربع:

لم يكن متصفحك يدعم علامة HTML5 canvas.

JavaScript:

var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

جرب بنفسك

نصيحة:يوجد المزيد من الأمثلة في قاعدة البيانات في أسفل الصفحة.

النحو

gradient.addColorStop(stop,color);

قيمة المتغيرات

المتغيرات وصف
stop قيمة بين 0.0 و 1.0، تمثل المكان بين البداية والنهاية في التدرج.
color قيمة اللون CSS التي تظهر في نهاية المكان.

مزيد من الأمثلة

مثال 2

تعريف التدرج باستخدام عدة طرق addColorStop():

لم يكن متصفحك يدعم علامة HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

جرب بنفسك

دعم المتصفح

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

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