تدرجات قماش HTML
قماش - تدرجات
يمكن استخدام التدرجات لتعبئة المستطيلات والدوائر والخطوط والنص وما إلى ذلك. لا تقتصر الأشكال الموجودة على اللوحة القماشية على الألوان الصلبة.
هناك نوعان مختلفان من التدرجات اللونية:
- createLinearGradient ( x، y، x1، y1 ) - إنشاء تدرج خطي
- createRadialGradient ( x، y، r، x1، y1، r1 ) - إنشاء تدرج نصف قطري / دائري
بمجرد أن يكون لدينا كائن متدرج ، يجب أن نضيف توقفي لوني أو أكثر.
تحدد طريقة addColorStop () التوقفات اللونية وموضعها على طول التدرج اللوني. يمكن أن تكون مواضع التدرج في أي مكان بين 0 إلى 1.
لاستخدام التدرج اللوني ، اضبط خاصية fillStyle أو strokeStyle على التدرج اللوني ، ثم ارسم الشكل (مستطيل أو نص أو خط).
باستخدام 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);