حالة الاستخدام الثانية لـ fillStyle هي التعبئة المتدرجة. تنقسم الألوان المتدرجة إلى ألوان متدرجة خطية وألوان متدرجة شعاعية.
التدرج الخطي: سيتم استخدام وظيفتين جديدتين للقماش هنا تقريبًا.
الخطوة 1: استخدم وظيفة جديدة createLinearGradient(xstart,ystart,xend,yend);var LinearGrad = context.createLinearGradient(xstart,ystart,xend,yend);
لديها أربع معلمات. وهي على التوالي، xstart، وystart، وxend، وyend، والتي تشكل إحداثيين، وتشكل هاتان الإحداثيتان قطعة خطية. هذا الجزء الخطي هو في الواقع خط متدرج. تُستخدم خطوط التدرج لتحديد اتجاه وحجم التدرج.
الخطوة الثانية: إضافة colorStop بناءً على خط التدرج هذا وتسمى هذه الطريقة addColorStop(stop, color). لها معلمتان: التوقف واللون. المعلمة الأولى هي قيمة النقطة العائمة المستخدمة لتحديد موضع لون المفتاح. يتم استخدام المعلمة الثانية لتحديد لون اللون الرئيسي. LinearGrad.addColorStop(stop,color);
بعد إكمال هاتين الخطوتين، يمكن تمرير متغير الخطي إلى هذه السمة باسم fillStyle.
انظر إلى الكود:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, virtual-scale=1.0> <meta http-equiv=X-UA -المحتوى المتوافق=ie=edge> <title>التدرج الخطي</title></head><body> <canvas id=canvas style=border: 1px Solid #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var Canvas = document.getElementById(canvas;width = 800 ; Canvas.height = 600; if (canvas.getContext(2d)) { var context = Canvas.getContext(2d); context.createLinearGradient(0, 0, 800, 600); // إحداثي البداية لخط التدرج هو (0,0) وإحداثي النهاية هو (800,600) خطي Grad.addColorStop(0.0, '#000'); تمثل المعلمة الأولى موضع اللون الرئيسي، ويمثل 0 موضع البداية، ويمثل 1 موضع النهاية، وتمثل المعلمة الثانية لون اللون الرئيسي. lineGrad.addColorStop(1.0, '#fff'); context.fillStyle = LineGrad; context.fillRect(0, 0, 800, 600); ') } </script>تقديم:
بعد أن نقوم بإنشاء المتغير الخطي، يمكننا إضافة ColorStop وإضافة الكثير.
على سبيل المثال:
شفرة:
var LinearGrad = context.createLinearGradient(0, 0, 800, 600); // إحداثي البداية لخط التدرج هو (0,0) وإحداثي النهاية هو (800,600) خطي Grad.addColorStop(0.0, '#fff') lineGrad addColorStop(0.25, '#FB3'); '#690'); خطيGrad.addColorStop(0.75, '#09C');
تقديم:
كما أن خط التدرج الذي حددناه مائل، ويمكننا أيضًا تعريفه على أنه أفقي أو رأسي. نحتاج فقط إلى تعديل إحداثيات النهاية لخط التدرج. انظر إلى الكود لعمل تدرج أفقي:
var LinearGrad = context.createLinearGradient(0, 0, 800, 0);
تقديم:
لون التدرج العمودي:
var LinearGrad = context.createLinearGradient(0, 0, 800, 0);
تقديم:
بغض النظر عما إذا كانت مائلة أفقيًا أو رأسيًا، فإن ما نقوم به يمر عبر اللوحة القماشية بأكملها، فماذا سيكون التأثير إذا تم تخصيص خط التدرج الخاص بنا لجزء من اللوحة القماشية فقط؟ دعونا تعديله
var LinearGrad = context.createLinearGradient(0, 0, 400, 300);
تقديم:
بنفس الطريقة، يمكن أن يتجاوز خط التدرج الذي نقوم بإنشائه الحد الأقصى لعرض وارتفاع هذه اللوحة القماشية. دعونا تعديله
var LinearGrad = context.createLinearGradient(-200, -100, 1000, 800);
تقديم:
كما أن الأشكال المعبأة التي نرسمها قد لا تشغل بالضرورة اللوحة القماشية بأكملها. يمكننا تعديل الشكل الذي نحدده بشكل تعسفي. سيجد هذا الشكل المعبأ لون التعبئة المناسب على خط التدرج الذي حددناه ويملأه. على سبيل المثال:
var LinearGrad = context.createLinearGradient(-200, -100, 1000, 800);
تقديم:
التدرج الشعاعي: الفرق عن التدرج الخطي هو أن التدرج الشعاعي يحدد التدرج الشعاعي. يتم تعريف هذا التدرج الشعاعي على أساس دائرتين متحدة المركز. على عكس التدرج الخطي الذي يتم تعريفه بين نقطتين.
تتطلب التدرجات الشعاعية أيضًا خطوتين لإكمالها.
الخطوة 1: استخدم وظيفة جديدة createRadialGradient(x0,y0,r0,x1,y1,r1); لديه 6 معلمات. تحدد المعلمات الثلاثة الأولى إحداثيات ونصف قطر الحلقة الأولى، وتحدد المعلمات الثلاث الأخيرة إحداثيات ونصف قطر الحلقة الثانية. يحدث التدرج الشعاعي بأكمله بين هاتين الدائرتين. var radialGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
الخطوة 2: إنه نفس التدرج الخطي، لذا لن أعرضه بالتفصيل. radialGrad.addColorStop(stop,color);
الكود مشابه جدًا لرمز التدرجات الخطية. يتم استخدام createRadialGradient هنا فقط، حيث نقوم بتمرير المعلمات createRadialGradient(300,300,0,300,300,500). تحدد المعلمات الثلاثة الأولى نقطة بنصف قطر 0 في وسط اللوحة. تحدد المعلمات الثلاثة الأخيرة دائرة كبيرة يبلغ نصف قطرها 500 في وسط اللوحة القماشية. يحدد هذا التدرج الشعاعي الذي يشع إلى الخارج من نقطة ما. ألق نظرة على الكود
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, virtual-scale=1.0> <meta http-equiv=X-UA -المحتوى المتوافق=ie=edge> <title>التدرج الشعاعي</title></head><body> <canvas id=canvas style=border: 1px Solid #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var Canvas = document.getElementById(canvas;width = 600 ;canvas.height = 600; context.createRadialGradient(300, 300, 0, 300, 300, 500); radialGrad.addColorStop(0.0, '#fff'); radialGrad.addColorStop(0.25, '#FB3'); '); radialGrad.addColorStop(0.75, '#09C'); radialGrad.addColorStop(1.0, '#000'); context.fillStyle = radialGrad; context.fillRect(0, 0, 600, 600); متصفحك لا يدعم اللوحة القماشية، يرجى محاولة تغيير متصفحك~') } }</script>تقديم:
يمكنك محاولة تغيير المعلمات لمعرفة التأثيرات المختلفة التي ستحدث.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.