التدرجات في Canvas

يمكن استخدام تدرج Canvas في HTML5 كنمط ألوان للملء أو الحواف للشكل، وليس الألوان البحتة. هو نمط ألوان يتدرج من لون إلى آخر. هناك نوعان من التدرجات: Linear (خطي) و Radial (دائري)

يمكن استخدام تدرج Canvas في HTML5 كنمط ألوان للملء أو الحواف للشكل، وليس الألوان البحتة. هو نمط ألوان يتدرج من لون إلى آخر. إليك بعض الأمثلة لتوضيح ما أعنيه:

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

1. Linear (تدرج خطي)

2. Radial (تدرج دائري)

يستخدم التدرج الخطي نمط خطي أفقي، عمودي أو مائل لتغيير الألوان.
يستخدم التدرج الدائري نمط دائري لتغيير الألوان، ويتم تغيير الألوان من الداخل إلى الخارج.
تم تقديم نوعين من التدرجات في هذا المقال.

تدرج خطي

كما ذكرت سابقاً، يستخدم التدرج الخطي نمط خطي لتغيير الألوان. يتم إنشاء تدرج خطي باستخدام وظيفة سياق الـ2D createLinearGradient(). إليك مثال:

var canvas = document.getElementById("ex1");
var السياق = الكanvas.getContext("2d");
　　　　
var x1 =        0;
var y1 =        0;
var x2 = 100;
var y2 =        0;
var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);

وظيفة createLinearGradient() تستخدم أربعة معلمات: x1،y1،x2،y2. هذه المعلمات تحدد اتجاه وتوسع نمط التدرج. يتدفق التدرج من النقطة الأولى x1،y1 إلى النقطة الثانية x2،y2.
تُنشأ التدرجات الأفقية عن طريق تغيير قيمة المعامل على المحور x (لـ x1 وx2) كما هو موضح أدناه:

　　　　var x1 =        0;
　　　　var y1 =        0;        var x2 = 100;
　　　　var y2 =        0;
　　　　var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);

تُنشأ التدرجات العمودية عن طريق تغيير قيمة المعامل على المحور y (لـ y1 وy2) كما هو موضح أدناه:

　　　　var x1 =        0;        var y1 =        0;
　　　　var x2 =        0;        var y2 = 100;
　　　　var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);

تُنشأ التدرجات المائلة عن طريق تغيير معاملات المحورين x و y في نفس الوقت. هذا مثال:

　　　　var x1 =        0;
　　　　var y1 =        0;
　　　　var x2 = 100;
　　　　var y2 = 100;
　　　　var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);

وقف الألوان

لم يتم عرض ألوان التدرج في المثال السابق. يمكنك تعيين ألوان التدرج باستخدام ميزة addColorStop() على كائن التدرج. هذا مثال:

var linearGradient1 = context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0, 'rgb(255,    0,    0)');
linearGradient1.addColorStop(1, 'rgb(    0,    0,    0)');

يملك دالة addColorStop() 2 معامل. المعامل الأول هو عدد بين 0 و1. هذا الرقم يوضح موقع علامة اللون في منطقة التدرج. المعامل الثاني هو اللون نفسه. لاحظ كيف يستخدم هذا المثال تمثيل الألوان rgb(red, green, blue)، حيث يمكن أن تكون كل قيمة الأحمر/الأخضر/الأزرق عدد بين 0 و255 (ممثلًا بثمانية أحرف).
أضفت في المثال السابق علامتين لون. الأولى هي الأحمر، تم ضبطها لتكون من بداية التدرج (الرقم الأول هو 0). اللون الثاني هو الأسود، تم ضبطه لتكون في نهاية منطقة التدرج (الرقم الأول هو 1).
يمكنك إضافة أكثر من علامة لون إلى التدرج. هذا مثال يحتوي على 3 علامات لون:

var linearGradient1 = context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0, 'rgb(255, 0, 0)');
linearGradient1.addColorStop(0.5, 'rgb(0, 0, 255)');
linearGradient1.addColorStop(1, 'rgb(0, 0, 0)');

إذا أضفت لون أزرق في منتصف التدرج. سيكون التدرج ينتقل من الأحمر إلى الأزرق بسلاسة، ثم إلى الأسود.

استخدام التدرج كملء أو خطوط

يمكنك استخدام التدرج كملء أو نمط قلم. كل ما تحتاجه هو تعيين خاصية fillStyle أو strokeStyle لسياق الـ 2D إلى تشير إلى كائن التدرج. هذا مثال:

var linearGradient1 = context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0, 'rgb(255, 0, 0)');
linearGradient1.addColorStop(0.5, 'rgb(0, 0, 255)');
linearGradient1.addColorStop(1, 'rgb(0, 0, 0)');
context.fillStyle = linearGradient1;
context.strokeStyle = linearGradient1;

الآن، يمكنك استخدام التدرج كألوان تلون أو رسم هامش لرسم. هذا مثال على رسم مربعين - واحد ملون، والآخر مكتوب بهامش (وصف):

<canvas id="ex2" width="500" height="125" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas غير مدعوم
</canvas>
<script>
var canvas = document.getElementById("ex2");
var السياق = الكanvas.getContext("2d");
var linearGradient1 = context.createLinearGradient(0, 0, 100, 0); // horizontal gradient
linearGradient1.addColorStop(0, 'rgb(255, 0, 0)');
linearGradient1.addColorStop(0.5, 'rgb(0, 0, 255)');
linearGradient1.addColorStop(1, 'rgb(0, 0, 0)');
السياق.fillStyle = linearGradient1;
context.fillRect(10, 10, 100, 100);
var linearGradient2 = context.createLinearGradient(125, 0, 225, 0); // horizontal gradient
linearGradient2.addColorStop(0, 'rgb(255, 0, 0)');
linearGradient2.addColorStop(0.5, 'rgb(0, 0, 255)');
linearGradient2.addColorStop(1, 'rgb(0, 0, 0)');
السياق.strokeStyle = linearGradient2;
السياق.strokeRect(125,10,100,100);
</script>

هذا هو النتيجة عند رسمه على اللوحة:

نطاق تدرج التدرج

من المهم فهم درجة التدرج. إذا كان التدرج يبدأ من x = 10 ويستمر إلى x = 110، فإن الرسومات التي يتم رسمها مع x بين 10 و110 ستطبق لون التدرج. الرسومات التي يتم رسمها خارج هذه المنطقة ستتأثر بالتدرج، ولكن سيتم رسمها بلون أول أو آخر لون في التدرج.
على سبيل المثال، لنفترض أن التدرج يبدأ من x = 150 وينتهي في x = 350. سيبدأ التدرج من الأزرق ويبدأ في التحول إلى الأخضر. جميع الرسومات التي يتم رسمها مع x أقل من 150 سيتم رسمها باللون الأزرق. جميع الرسومات التي يتم رسمها مع x أكبر من 350 سيتم رسمها باللون الأخضر. فقط الرسومات التي يتم رسمها بين x = 150 وx = 350 ستكون لديها لون تدرج.
هذا مثال على شيفرة، يستخدم التدرج المذكور أعلاه لرسم 5 مستطيلات لشرح ذلك

<canvas id="ex3" width="500" height="250" style="border:1px solid #cccccc;">
　　　　HTML5 Canvas غير مدعوم
</canvas>
<script>
var الكanvas = document.getElementById("ex3");
var السياق = الكanvas.getContext("2d");
var linearGradient1 = السياق.createLinearGradient(150,0,350,0);
linearGradient1.addColorStop(0,'rgb(0,0,255)');
linearGradient1.addColorStop(1,'rgb(0,255,0)');
السياق.fillStyle = linearGradient1;
السياق.fillRect(10,10,130,100);
السياق.fillRect(150,10,200,100);
السياق.fillRect(360,10,130,100);
السياق.fillRect(100,120,150,100);
السياق.fillRect(280,120,150,100);
</script>

هذا هو النتيجة عند الرسم على اللوحة. يرجى ملاحظة أن الرسومات التي لها قيم x بين 150 و 350 تستخدم ألوان التدرج، بينما تكون البقية باللون الأزرق الكامل (الأولى في الألوان المضافة) أو اللون الأخضر الكامل (الأخيرة في الألوان المضافة).

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

تدرج متناوب

يتمتع نوع التدرج المتناوب بتصميم دائري يبدأ من اللون الداخلي ويتمدد إلى لون أو أكثر من الألوان الأخرى. إليك بعض الأمثلة على الرسومات:

يحدد التدرج المتناوب اثنين من الدوائر. لدى كل دائرة مركز و نصف قطر. هذا هو مثال على الشيفرة:

var x1 = 100;　　　// coördinaten x van het middelpunt van de 1e cirkel
var y1 = 100;　　　// coördinaten y van het middelpunt van de 1e cirkel
var r1 = 30;　　　　// نصف قطر الدائرة الأولى
var x2 = 100;　　　// coördinaten x van het middelpunt van de 2e cirkel
var y2 = 100;　　　// coördinaten y van het middelpunt van de 2e cirkel
var r2 = 100;　　　// نصف قطر الدائرة الثانية
var radialGradient1 = context.createRadialGradient(x1, y1, r1, x2, y2, r2);
radialGradient1.addColorStop(0, 'rgb(0, 0, 255)');
radialGradient1.addColorStop(1, 'rgb(0, 255, 0)');
context.fillStyle = radialGradient1;
context.fillRect(10,10, 200, 200);

كما ترون، تم تعريف اثنين من نقاط الوسط (x1،y1 و x2،y2) وتم تعريف نصف قطرين (r1 و r2). هذه يتم تمريرها كمعاملات إلى وظيفة createRadialGradient()2D.
يجب استخدام نصف قطر مختلف لكل دائرة، حتى تؤدي إلى دائرة داخلية ودائرة خارجية (بأكبر حجم على الأقل). ثم سيتدرج اللون من دائرة إلى أخرى داخل التدرج.
يتمتع الألوان المضافة بنفس الطريقة التي يتمتع بها التدرج الخطي. إنها تعرف الألوان التي سيتم استخدامها في التدرج، وما يجب أن يتموضع فيه من ألوان داخل نطاق التدرج.
سيتم تطابق الألوان المضافة في موقع ما بين الدوائر. على سبيل المثال، فإن أول معامل في توقيتات الألوان 0 يعني أن الألوان ستبدأ من مكان الدائرة الأولى. فإن أول معامل في توقيتات الألوان 1 يعني أن الألوان ستبدأ من مكان الدائرة الثانية.
هذا هو النتيجة للشيفرة عند رسمها على لوحة HTML5:

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

var x1 = 100;
var y1 = 100;
var r1 = 30;
var x2 = 150;
var y2 = 125;
var r2 = 100;
var radialGradient1 = context.createRadialGradient(x1, y1, r1, x2, y2, r2);
radialGradient1.addColorStop(0, 'rgb(0, 0, 255)');
radialGradient1.addColorStop(1, 'rgb(0, 255, 0)');
context.fillStyle = radialGradient1;
context.fillRect(10,10, 200, 200);

هذا هو الشكل عند رسم التدرج على اللوحة: