ستتحدث هذه المقالة عن طريقة رسم المستطيلات والدوائر في قماش ، فهي تنتمي إلى الرسومات الأساسية. بالطبع ، هناك أكثر من مجرد الرسومات الأساسية ، ولكن في قماش ، لا يتطلب رسم المستطيلات والدوائر فقط عمليات محاكاة أخرى.
قماش رسم مستطيلات 1.يمكن لـ FillRect ملء المستطيل مباشرة ، وأسلوب التعبئة هو النمط الذي تقوم به حاليًا ؛ وبالمثل ، فإن strokerect هو ضرب مستطيل مباشرة
معلماتها متسقة ، بدورها (نقطة البداية X الإحداثي ، نقطة البداية Y ، عرض المستطيل ، ارتفاع المستطيل). نقطة البداية هنا ، ملاحظة ، تشير إلى النقطة في الركن الأيسر العلوي من المستطيل.
عادة ما نستخدمها للقيام بأشياء بسيطة ، ويمكنهم فعل أشياء بسيطة فقط. لماذا؟ لأن الكلمات التي لا تحتوي على الرسومات التي يرسمونها ليس لها مسارات ، فقد خرجوا مباشرة.
على سبيل المثال ، إذا قمت أولاً بملء مستطيل مع FillRect ، فأنت تريد أن تضرب المستطيل. إذا كنت تستخدم السكتة الدماغية () ، فلن يكون هناك أي تأثير ، لأنه على الرغم من وجود مستطيل في هذا الوقت ، لا يوجد مسار.
إذا كنت حريصًا على السكتة الدماغية في هذا المستطيل ، فيمكنك استخدام strokerect () لسكتة مستطيل في نفس الموضع - لكنها في الواقع مستقلة ، فقط متداخلة.
CTX.FillRect (200،100،50،40) ؛
CTX.StrokeCt (200،100،50،40) ؛
إذا كنا نريد مستطيلًا مملوءًا وضربتًا ، فسيكون بلا شك مرهقًا لاستخدام FillRect و Stroker Elect في نفس الوقت. لذلك في هذه الحالة نستخدم عادة الطريقة التالية.
2 ، المستقيم لا تختلف معلمات المستقيم عن FillRect و Strokerect. الفرق هو أنها ترسم المسار فقط ، وعليك إكمال السكتة الدماغية أو ملء نفسك لاحقًا.CTX.RECT (300،100،50،40) ؛
CTX.Stroke ()
ctx.fill () ؛
ما هي فوائد القيام بذلك؟ في المقالة السابقة ، ذكرت أن ملء أو السكتة الدماغية يستهلك الكثير من الموارد ، لذلك نحتاج غالبًا (مثل الحلقات) إلى رسم مئات المسارات في وقت واحد ، ثم السكتة الدماغية أو الملء. في هذا الوقت ، استخدم Rect لرسم المسار ثم ملئه مرة أخرى ، مما يتجنب مشكلة FillingRect و Strokerec أو السكتة الدماغية في كل مرة.
3. لينتوبالطبع ، يمكنك أيضًا استخدام 4 Linesto رسم مستطيل مثل البرنامج التعليمي الخاص بي على خطوط الرسم. ولكن هذا غير ضروري ، يرجى التحقق من هذه المقالة للحصول على التفاصيل.
قماش رسم دائرة السماء ليس لها عيون. في الواقع ، لا تحتوي القماش على وظيفة حقيقية يمكنها رسم دائرة مباشرة. ما يرسمه هو في الواقع قوس بزاوية 360 درجة ، والذي يبدو وكأنه دائرة.لقد ذكرنا وظيفة القماش رسم قوس من قبل ، أي قوس. نستخدمه لرسم دائرة:
CTX.ARC (300+25،100+20،20،0 ، Math.PI*2) ؛
CTX.Stroke ()
ctx.fill () ؛
هذا القوس هو نفسه المستقيم ، ويتم رسم المسار ، ويجب إكمال الحشوة أو السكتة الدماغية لاحقًا.
ولكن تجدر الإشارة إلى أن حكم الموقف من الدائرة يختلف عن الحكم المستطيل. نحدد موضعه مع الركن الأيسر العلوي من المستطيل كنقطة انطلاق ، لكننا نحدد عادة موضع الدائرة مع مركز الدائرة.
إذا كنت ترغب في رسم مجموعة من المستطيلات والدوائر التي تركز أفقياً ورأسياً ، فيجب أن تتذكر عدم اعتبار نقطة انطلاق المستطيل كنقطة انطلاق للدائرة - نقطة انطلاق الدائرة هي مركز الدائرة!
ننسى ذلك ، من الأفضل أن أعطيك صيغة الآن ، ودوائر ومستطيلات محاذاة ، وإحداثيات مركز الدائرة = إحداثيات المستطيلات + نصف عرض وارتفاع المستطيلات.
وهذا هو ، مركز الدائرة x = مستطيل x + عرض المستطيل/2 ، والدائرة y = مستطيل y + lectangle الارتفاع/2. وبهذه الطريقة يتم محاذاة تماما.
على الرغم من أن ARC ليس سهلاً الاستخدام كطريقة لرسم الدوائر مباشرة - فإن طريقة رسم الدوائر مباشرة التي تخيلتها تتطلب فقط 3 معلمات ، وهي إحداثيات مركزية للدائرة ، أي نصف القطر - ولكن لا يمكن أن يرسم القوس فقط ، ولكن أيضًا رسم درجات فاصلة ، لذلك يكون أكثر قوة ويمكن استخدامه.
نظرًا لوجود دائرة ، يجب أن يكون هناك القطع الناقص ، ولكن لا توجد حتى وظيفة منتظمة لرسم دائرة في قماش ، ناهيك عن القطع الناقص. لذلك ، يجب محاكاة رسم الحذف باستخدام طرق أخرى. هذا معقد للغاية ، لذلك سأترك الأمر للخطوة التالية.