مثال
تحديد التدرج أن يذهب من الأسود إلى الأبيض، حيث أن نمط التعبئة للمستطيل:
جافا سكريبت:
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); انها محاولة لنفسك » دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل الأسلوب.
| طريقة | |||||
|---|---|---|---|---|---|
| addColorStop() | 4.0 | تسعة | 3.6 | 4.0 | 10.1 |
تعريف والاستخدام
و addColorStop() يحدد طريقة الألوان والموقف في كائن التدرج.
و addColorStop() يستخدم أسلوب جنبا إلى جنب مع createLinearGradient() أو createRadialGradient() .
Note: يمكنك استدعاء addColorStop() طريقة عدة مرات لتغيير التدرج. إذا قمت بحذف هذه الطريقة لكائنات متدرجة، فإن التدرج لا تكون مرئية. تحتاج إلى إنشاء محطة لون واحد على الأقل أن يكون التدرج مرئية.
| جافا سكريبت بناء الجملة: | gradient . addColorStop( stop , color ) . |
|---|
قيم معلمة
| معامل | وصف | العبها |
|---|---|---|
| stop | قيمة بين 0.0 و 1.0 الذي يمثل الموقف بين بداية ونهاية في التدرج | العبها " |
| color | A قيمة CSS اللون الذي سيعرض في stop موقف | العبها " |
مزيد من الأمثلة
مثال
تحديد التدرج مع متعددة addColorStop() طرق:
جافا سكريبت:
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);
انها محاولة لنفسك »