قماش - التدرجات
التدرجات يمكن استخدامها لملء المستطيلات والدوائر والخطوط والنص، الخ الأشكال على قماش لا تقتصر على الألوان الصلبة.
هناك نوعان من أنواع مختلفة من التدرجات:
- createLinearGradient ( x,y,x1,y1 ) - يخلق الانحدار الخطي
- createRadialGradient ( x,y,r,x1,y1,r1 ) - يخلق شعاعي / التدرج دائري
مرة واحدة لدينا كائن التدرج، يجب أن نضيف اثنين أو أكثر من نقاط اللون.
و addColorStop() يحدد طريقة توقف اللون، وموقعها على طول الانحدار. يمكن المواقف التدرج يكون في أي مكان بين 0-1.
استخدام التدرج، تعيين الخاصية نمط ملء أو strokeStyle إلى التدرج، ثم رسم الشكل (rectangle, text, or a line) .
باستخدام createLinearGradient()
مثال
إنشاء الانحدار الخطي. ملء المستطيل مع التدرج:
جافا سكريبت:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80); انها محاولة لنفسك » باستخدام createRadialGradient() :
مثال
إنشاء / التدرج دائري شعاعي. ملء المستطيل مع التدرج:
جافا سكريبت:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
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,80); انها محاولة لنفسك »