HTML5 Canvas Drawing Tutorial (4) - مسارات غير موضحة وطرق ملء الألوان التدرج

هناك طريقتان للطلاء العامين ، وهما الملء والسكتة الدماغية. لقد تحدثت المقالة السابقة بالفعل عن طرق السكتة الدماغية. ستتحدث هذه المقالة عن طريقة ملء الرسومات في قماش.

ملء () هو واضح جدا؟ ومثلما يمثل Strokestyle نمط السكتة الدماغية ، يمثل FillStyle نمط التعبئة.

ctx.fillstyle = 'color' ؛ نمط التعبئة الافتراضي هو أسود غير شفاف

يستطيع. سوف تتصل Canvas مباشرة بنقطة البداية من نقطة نهاية المسار الحالي ثم ملئها. كما هو موضح في الصورة:

ولكن يمكنك أن تجد أن الفقرة الأخيرة لا تحتوي على ضربات.

أتذكر أننا في مقالتنا السابقة ، رسمنا مربعًا بـ 4 خطوط ، لكن القماش ليس سيئًا للغاية ، ولا توجد حتى وظيفة لرسم مستطيل مباشرة. يمكنك استخدام FillRect () لملء مباشرة في مستطيل:

ctx.fillRect (x ، y ، العرض ، الارتفاع) ؛

هنا X و Y تشير إلى إحداثيات نقطة انطلاق الزاوية اليسرى العلوية من المستطيل ، تذكر.

الحديث عن FillRect ، علينا أن نذكر strokerect. لقد خمنت ذلك بشكل صحيح ، فهذا يعني ضرب مستطيل مباشرة.

هناك أيضا ملهى و stroketext. أما بالنسبة للوظيفة ، فقد تكون قد خمنت ذلك. لن أتحدث عن ذلك هنا ، لذلك سيقوم الجميع بمعاينتها أولاً.

في القماش ، تنقسم ألوان التدرج أيضًا إلى نوعين ، وهما التدرج الخطي والتدرج الشعاعي ، كما أن طريقة إنشائها مستقلة أيضًا. دعونا نلقي نظرة أولاً على كيفية إنشاء تدرجات خطية.

قم بإنشاء التدرج الخطي = CreatelIneArgradient - انظر ، لا تزال كلمات مباشرة للغاية. بناء الجملة له كما يلي:

CreatelIneArgradient (x1 ، y1 ، x2 ، y2) لديه 4 معلمات! يبدو الأمر معقدًا للغاية ، ولكن في الواقع هذا أمر بسيط للغاية ، لأننا قلنا بالفعل أن نقطة في عالم الطائرة تحددها الإحداثيات X والإحداثيات Y. لذلك ، يمثل X1 ، Y1 إحداثيات نقطة البداية لتدرج خطي ، ويمثل X2 ، Y2 إحداثيات نقطة النهاية.

فوائد القيام بذلك واضحة ، وهي مريحة إذا أردنا إنشاء تدرج خطي مائل. ولكن دعونا نحاول إنشاء تدرج خطي أفقي أولاً.

var linear = ctx.createlineargradient (100،100،200،100) ؛ يبدو أن التدرج قد تم إنشاؤه ، فهل يمكننا ملءه؟ -هذا التدرج فارغ وليس له لون.

طريقة إضافة اللون إلى شريط التدرج هي AddColorStop (الموضع ، اللون). لكن كن على دراية بأن هذا AddColorstop لم تتم إضافة الفرشاة ، ولكن إلى المتغير الذي يحفظ التدرج في المقدمة. أنا خطي هنا.

var linear = ctx.createlineargradient (100،100،200،100) ؛

linear.addcolorstop (0 ، '#fff') ؛

linear.addcolorstop (0.5 ، '#f0f') ؛

linear.addcolorstop (1 ، '#333') ؛

لقد استخدمت 3 AddColorstops هنا ، مما يعني إضافة 3 ألوان إلى شريط التدرج.

في هذا الوقت ، يمكننا ملء لون التدرج ، ولكن يجب علينا أولاً تعيين التدرج المحدد لملء أسلوب.

var linear = ctx.createlineargradient (100،100،200،100) ؛

linear.addcolorstop (0 ، '#fff') ؛

linear.addcolorstop (0.5 ، '#f0f') ؛

linear.addcolorstop (1 ، '#333') ؛

ctx.fillstyle = خطي ؛ // تعيين التدرج لملء النمط

CTX.FillRect (100،100،100،100) ؛

ctx.stroke () ؛

لاحظ أن FillRect و Strokerect رسم مسارات مستقلة. على سبيل المثال ، في الكود أعلاه ، يتم استدعاء السكتة الدماغية بعد FillRect ، ولن يتم ضرب المستطيل المرسوم للتو. وينطبق الشيء نفسه على strokerect.

بعد الاختبار ، وجدت مشكلة مؤلمة للغاية ، أي أن إحداثيات التدرجات الخطية تتعلق بمجموعة القماش بأكملها. على سبيل المثال ، هنا ، يبدأ التدرج الخطي في 100،100. إذا رسمت مستطيلًا عند 0،0 وملأته بهذا التدرج ، فسوف أجد أنه لا يوجد أي ملء - لأن نطاق التدرج الخاص بي يتجاوز ببساطة نطاق المستطيل.

هذا هو حقا إعداد الاحتيال.

مقابلة. اللون قبل نقطة البداية هو لون نقطة البداية ، واللون بعد نقطة النهاية هو دائمًا لون نقطة النهاية.

كيفية إنهاء لون نقطة النهاية ، يمكنك ملء لون نهاية شفاف بعد اللون النهائي. يحب:

linear.addcolorstop (0.99 ، '#333') ؛

linear.addcolorstop (1 ، 'RGBA (51،51،51،0)') ؛

وفقًا للخطة السابقة ، سأحاول بناء تدرج خطي آخر مائل. فقط قم بتغيير معلمات createlineargradient.

var linear = ctx.createlineargradient (100،100،200،200) ؛

يظهر التأثير في الصورة:

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

CreaterAdialGradient (X1 ، Y1 ، R1 ، X2 ، Y2 ، R2) حيث لا يزال X1 و Y1 و X2 و Y2 يمثل نقطة البداية ونقطة النهاية ، ولكن نقطة البداية ونقطة النهاية هنا هي دائرة ، و X ، Y هي إحداثيات مركز الدائرة. لذلك ، R1 و R2 هما نصف قطر دائرة نقطة البداية ونصف قطر دائرة نقطة النهاية ، على التوالي. كما هو موضح في الصورة:

في انطباعي ، يبدو أن التدرج الشعاعي هو دائرة ، مركز الدائرة هو نقطة البداية ، ونصف دائرة الدائرة هو نقطة النهاية. لكن التدرج الشعاعي في القماش يختلف في الواقع. نقطة البداية هي دائرة ونقطة النهاية هي دائرة تختلف عن فهمي.

لنبدأ بأبسط. أولاً ، قم بتدرج شعاعي منتظم للغاية ، أي أن مركز دائرة التدرج هو نقطة انطلاق التدرج. بسبب التدرج الشعاعي المنتظم ، يكون المركز هو مركز الدائرة ، يجب أن نحاول تجنب الانحراف. لذلك ، دعونا نتداخل مع مركز الدائرة النهائية مع مركز دائرة البداية؟

var radial = ctx.createDialGradient (55،55،10،55،55،55) ؛ // إحداثيات المركز المقابلة

RADIAL.ADDCOLORSTOP (0 ، '#fff') ؛

RADIAL.ADDCOLORSTOP (0.5 ، '#ff0') ؛

RADIAL.ADDCOLORSTOP (0.9 ، '#555') ؛

RADIAL.ADDCOLORSTOP (1 ، '#f00') ؛

إن دائرة نقطة انطلاق التدرج الشعاعي وإحداثيات مركز الدائرة النهائية التي حددتها هنا هي نفسها ، في حين أن نصف قطر دائرة نقطة البداية هو 10 ، ويشير نصف قطر دائرة نقطة النهاية إلى 55 عامًا. إن آخر نطاق التدرج الشعاعي المرسوم هو دائرة ذات عرض وارتفاع 110 ، مما يشير إلى أن نطاق التدرج يعتمد على نطاق دائرة نقطة الإنجاز.

(يمكنك أن ترى أنه لا يزال هناك لون خارج نطاق الدائرة النهائية ، وهذا اللون هو اللون النهائي. ومع ذلك ، إذا حاولت استخدام ryly.addcolorstop (1.5 ، '#0f0') ؛ لتحديد الألوان خارج نطاق التدرج ، ستظل تتلقى خطأ).

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

دعنا نجعل نصف قطر دائرة البداية كبيرة جدًا ، بالقرب من نصف قطر الدائرة النهائية:

var radial = ctx.createDialGradient (55،55،50،55،55،55) ؛ // قريبة جدا

تظل Colorstops الأخرى دون تغيير ، ثم تصبح الرسومات هكذا.

وبعبارة أخرى ، يتم استخلاص لون انطلاق التدرج الشعاعي في قماش من خارج نطاق دائرة البداية ، واللون الكامل لدائرة البداية هو لون البداية.

دعنا نضع نصف قطر دائرة نقطة البداية إلى 0 ، وتغيير مركز التدرج الشعاعي هو حقًا نقطة.

في معظم الوقت ، لا نحتاج إلى تدرج شعاعي رسمي للغاية ، ولكن بدلاً من ذلك نأمل أن يتم تعويض تغيير القلب ، على غرار الشكل أدناه:

في هذا الوقت ، تخرج ميزة دائرتي التدرج الشعاعي للقماش. طالما أن مركز دائرة نقطة البداية ودائرة نقطة النهاية لا يتداخل ، فإن تغيير القلب سيتغير أيضًا:

var radial = ctx.createDialGradient (75،75،0،55،55،55) ؛ لكن نطاق التدرج في هذا الوقت لا يزال نطاق الدائرة النهائية.

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

var radial = ctx.createDialGradient (75،75،55،55،55،0) ؛

بعد الاختبار ، لن تكون هناك أخطاء ، لكن التدرج الأصلي من الداخل إلى الخارج قد تحول إلى تدرج من الخارج إلى الداخل. هذه طريقة جيدة لاستخدامه.

هناك مشكلة أخرى. إذا قمنا بتغيير مركز دائرة البدء ويتجاوز نطاق دائرة البداية نطاق الدائرة النهائية ،

ماذا يحدث في هذا الوقت؟

آه! ؟ ما هو الوضع؟ !

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

بالإضافة إلى ذلك ، نظرًا لأنه يمكن تعيين التدرج إلى FillStyle ، يمكن أيضًا تعيينه إلى Strokestyle. أنت تعرف التأثير.