إذا كنت لا تعرف ما هي اللوحة بعد ، فيمكنك الاطلاع على المقالة السابقة.
عند تعلم الرسم ، تكون الخطوط هي الأكثر أساسية ، ويمكن أن يشكل اتصال الخطوط أي شكل. وينطبق الشيء نفسه في قماش.
قبل أن نبدأ ، نخرج قماشًا وفرشًا:
var cvs = document.getElementById ('cvs') ؛ // قماش
var ctx = cvs.getContext ('2d') ؛ // فرشاة
عندما نرسم ، لا يتم إصلاح نقطة القلم وستتغير في أي وقت. على الرغم من أن القماش لا يحدد نقطة الكتابة من خلال الأيدي ، إلا أن هناك أيضًا طريقة ، وهي Moveto. يعادل Moveto رفع طرف القلم من القماش ونقله إلى النقطة المحددة (أي الإحداثيات).
ctx.moveto (x ، y)
لا يتم رسم أي رسومات خلال هذه العملية ، وهو ما يعادل التأرجح على القماش بقلمك.
لكن من غير المجدي التأثير ، علينا أن نبدأ الرسم. ارسم أبسط: الخطوط المستقيمة
طريقة رسم خط مستقيم هي LineTo. معلماتها هي نفس Moveto ، وكلاهما نفس النقطة.
ctx.lineto (x ، y) بالطبع ، عندما ترسم خطًا ، تتحرك نقطة القلم أيضًا ، لذلك بعد Lineto ، تصبح نقطة القلم نقطة هدفها.
CTX.Moveto (100،100) ؛
CTX.Lineto (200،100) ؛
في هذا الوقت ، تقوم بتحديث صفحة الويب وستجد أنه لا يوجد خط متوقع على القماش ولا شيء. لأن لدينا خطوة واحدة أقل. inlyto هو في الواقع مسار مرسوم وغير مرئي في حد ذاته. إذا كنا نريده أن يظهر ذلك ، يجب أن نرسمه.
سيعرف الطلاب الذين استخدموا PS بالتأكيد وضعي الرسومات ، والآخر يملأ والآخر هو السكتة الدماغية. الآن لقد رسمنا خطًا ، وهو ما يعادل رسم مسار في PS. في هذا الوقت ، يمكننا رسم حواف المسار وسيتم عرض الشكل.
طريقة القماش السكتة الدماغية هي السكتة الدماغية (). الآن دعنا نكممل الرمز:
CTX.Moveto (100،100) ؛
CTX.Lineto (200،100) ؛
ctx.stroke () ؛ تحديث في هذا الوقت ويمكنك رؤية خط. بالطبع ، يمكنك أيضًا رسم مئات المسارات على التوالي ومن ثم إجراء إجراءات السكتة الدماغية لرسم مئات الخطوط في وقت واحد. الآن دعونا نرسم مستطيلًا بـ 4 خطوط:
CTX.Moveto (100،100) ؛
CTX.Lineto (200،100) ؛
CTX.Lineto (200،200) ؛
CTX.Lineto (100200) ؛
CTX.Lineto (100،100) ؛
ctx.stroke () ؛
هنا نرسم كل المسارات أولاً ثم نضربها واحدًا تلو الآخر.
- شكوى المؤلف: أحد الأشياء السيئة حول رسم قماش هو أنه يعتمد بشكل أساسي على التخمين ، وهو ليس بديهيًا.
نصيحة خطيرة: عملية رسم اللوحة القماشية (أي الملء والسكتة الدماغية) تستغرق الموارد للغاية. إذا كنت ترغب في توفير موارد النظام وتحسين الكفاءة ، فمن الأفضل رسم جميع المسارات وملء أو السكتة الدماغية في وقت واحد.
من الشكل أعلاه ، يمكننا أن نرى أن سمك الخط الافتراضي هو 1 بكسل ، في حين أن لون الخط أسود. بالطبع يمكننا أن نضعهم ، لكن الشيء الغريب هو أن عرض الخط هو عرض خط ، في حين أن نمط الخط يسمى Strokestyle. لماذا لا تكون Linestyle؟ لا أعرف أيضًا. :
ctx.linewidth = 10 ؛
CTX.Strokestyle = 'RGBA (255،0،0،5)' ؛
يعين الرمز أعلاه عرض الخط إلى 10 بكسل ، ويصبح لون الخط أحمر شفاف.
كما هو موضح في الشكل 1 ، قم بتحديثه ، يبدو أن هناك خطأ ما! لماذا يبدو أن قطعة صغيرة مفقودة في الركن الأيسر العلوي؟ هذا ليس وهمًا. السبب يبدأ بالطريقة التي رسم بها خط القماش.
سؤال: إذا كان مسار المستطيل الذي أرسمه هو 100 في العرض والارتفاع ، وعرض خط الحافة الخاص بي هو 10 بكسل ، فما هو العرض الإجمالي وارتفاع هذا المستطيل مع الحافة المرسومة؟ هل هو 100+10*2 = 120؟
إذا تم رسم الحافة بالكامل خارج المسار ، فهي 120. لكن القماش ليس كذلك. تحتوي الخطوط الموجودة في القماش على خط الوسط ، الموجود في منتصف الخط المطلق ، وتمتد السكتات الدماغية للخط إلى كلا الجانبين مع خط الوسط. على سبيل المثال ، إذا كان عرض الخط الخاص بك 1 ، فإن خط الوسط عند 0.5 ؛ إذا كان العرض 5 ، فإن خط الوسط هو 2.5. عندما يتم ضرب الشكل القماشي ، يناسب المسار خط الوسط للخط ثم السكتات الدماغية. كما هو مبين في الشكل 2:
لذلك ، عندما يكون الضرب ، يكون نصف الخط في الخارج ونصف النصف في الداخل ، أي العرض الكلي للمستطيل العلوي هو 100+ (10/2)*2 ، وهو ما يساوي 110.
من الطبيعي أن يكون من الطبيعي أن يكون لديك زاوية مفقودة في الزاوية اليسرى العلوية. لأنه لم يرسمها أحد هنا.
ولكن لماذا لا توجد فجوات في الزوايا المتبقية؟ انظر إلى صورتك ، ألا تكون هناك فجوات في الزوايا الأربع؟
ذلك لأنني لم أرفع الفرشاة أثناء رسم الخطوط ، وكانت الفرش مستمرة ، أي لم أكن MOVETO من قبل. إذا كنت لا تصدق ذلك ، فلنطفو الآن:
CTX.Moveto (100،100) ؛
CTX.Lineto (200،100) ؛
CTX.Moveto (200،100) ؛ // ملاحظة هنا
CTX.Lineto (200،200) ؛
CTX.Lineto (100200) ؛
CTX.Lineto (100،100) ؛
ctx.linewidth = 10 ؛
CTX.Strokestyle = 'RGBA (255،0،0،5)' ؛
ctx.stroke () ؛
انتقلنا قبل رسم السطر الثاني ، ولم تتغير إحداثيات Moveto ، ولا تزال نفس النقطة ، ولكن بعد التحديث ، يصبح الشكل مثل هذا [الشكل 3]:
مفهومة؟ لأننا رفعنا القلم.
الآن دعنا نحذف Moveto ، لا تقلق بشأن ذلك ، دعنا نفكر في كيفية ملء الزاوية المفقودة في الزاوية اليسرى العليا؟
أولاً ، اسمحوا لي أن أطرح سؤالاً ، هل تم إغلاق طريقنا؟ أليس هذا هراء؟ ألم نعيد الطريق إلى الأصل بالفعل؟ بالطبع إنه مغلق!
خطأ! هذا يجعل النقطة الأخيرة من المسار تتداخل مع نقطة البداية ، ولكن المسار نفسه غير مغلق!
كيفية إغلاق المسار في قماش؟ استخدم ClosePath ().
CTX.Moveto (100،100) ؛
CTX.Lineto (200،100) ؛
CTX.Lineto (200،200) ؛
CTX.Lineto (100200) ؛
CTX.Lineto (100،100) ؛
ctx.closepath () ؛ // إغلاق المسار
ctx.linewidth = 10 ؛
CTX.Strokestyle = 'RGBA (255،0،0،5)' ؛
ctx.stroke () ؛
الانتعاش في هذا الوقت سيجعلك مربعًا مثاليًا. الشكل 4:
بغض النظر عن مدى سميك نغير الخطوط - كلما زاد سمك الناس مثلهم ، أليس كذلك؟ -الزوايا الأربع من هذا المربع هي زوايا صحيحة منتظمة ولن تكون ناعمة. ما هي القضية مع زاوية ناعمة؟ يرجى الاطلاع على السكتة الدماغية المربعة في PS ، الشكل 5:
رأيته. كلما كانت الحافة أكثر سمكا ، كلما زاد قوس الزاوي.
إذا اعتقدت أن خطوط الحافة في قماش هي نفسها تلك الموجودة في PS ، هل هناك أي طريقة؟ بالطبع ، هناك سمة الانصهار.
Linejoin ، مما يعني تقاطع الخطوط ، له 3 خصائص: miter (الافتراضي ، الزاوية الحادة) ، المائل (المائل) ، والجولة (الجولة) ، كما هو موضح في الشكل 6:
ليس هناك شك في أنه يمكننا أن نفهم أن مستطيلنا يستخدم زوايا حادة ، لذا حاول تغييرها إلى الزوايا المستديرة:
أصبحت الرسومات مثل هذا ، الشكل 7:
إنه مثل PS ، أليس كذلك؟
بالإضافة إلى ذلك ، من الصورة السابقة ، علمنا أن طرفي خط القماش مسطح ، هل يمكن تغييره؟ بعد كل شيء ، إنه ليس ذو مظهر جيد.
من الممكن أيضًا ، أي خاصية LinEcap ، وهي نقطة النهاية التي تحدد الخط. يحتوي Linecap على 3 قيم: بعقب (مسطح ، افتراضي) ، جولة (دائرة) ، مربع (مربع) ، كما هو موضح في الشكل 8
يمكنك أن تجد أن الرأس المسطح هو في الواقع نفس رأس المربع ، والفرق الوحيد هو أن الرأس المسطح لا يمتد. يمتد كل من الرأس المستدير والرأس المربع في قطعة. ما هي مدة هذا القسم؟ هذا نصف عرض الخط.
هل فكرت في أي شيء؟ هاها ، مشكلة المسار المغلق السابق ، إذا قمنا بتعيين LinEcap كرأس مربع ، فسيكون التأثير هو نفسه!
ولكن لكي نكون على الجانب الآمن ، لا يزال يتعين علينا إغلاق المسار ، تذكر!
أريد أيضًا أن أذكرك: المسار المغلق ليس له نقاط نهاية! وبالتالي فإن نمط نقطة النهاية غير مرئي على المسار المغلق.
بالإضافة إلى ذلك : يشبه LinEcap بعض الشيء Line -Join ، احرص على عدم العبث.إذا كنت حاد العينين ولديك حظ سيئ ، فقد تجد أنه في بعض الأحيان لا تكون خطوط 1 بكسل بعرض 1 بكسل ، ولكن يبدو أنها أوسع وذات ضبابية. كما هو مبين في الشكل 9:
مبروك! واجهت خطأ لم يكن خطأ. هذا مميز للغاية ، سأضعه في المقال التالي