التدرجات على لوحة الرسوم المتحركة HTML

لوحة - التدرجات

يمكن استخدام التدرج لملء المثلثات، الدوائر، الخطوط، النصوص، إلخ. الشكل على اللوحة ليس محصورًا في الألوان البحتة.

هناك نوعان من التدرجات المختلفة:

• createLinearGradient(x,y,x1,y1) - إنشاء تدرج خطي
• createRadialGradient(x,y,r,x1,y1,r1) - إنشاء تدرج دائري/حلقي

بمجرد الحصول على كائن التدرج، يجب إضافة اثنين أو أكثر من علامات الألوان.

يحدد طريقة addColorStop() نقاط التوقف لللون及其 موقع في التدرج. يمكن أن يكون موقع التدرج أي موقع بين 0 و 1.

لإستخدام التدرج، قم بتعيين fillStyle أو strokeStyle إلى تدرج، ثم أرسم الشكل (مثلث، نص أو خط).

استخدام createLinearGradient()

مثال

إنشاء تدرج خطي. استخدم التدرج لملء المثلث:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// إنشاء تدرج
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// يُستخدم التدرج لملء
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

جربها بنفسك

استخدام createRadialGradient():

مثال

إنشاء تدرج دائري/حلقي. استخدم التدرج لملء المثلث:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// إنشاء تدرج
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// يُستخدم التدرج لملء
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

جربها بنفسك

يرجى الرجوع إلى:

دليل مرجعي كامل لـ Canvas في CodeW3C.com