في المقالة على خطوط رسم قماش ، تحدثت عن طريقة رسم خطوط مستقيمة. كان ينبغي نشر هذه المقالة حول منحنيات الرسم منذ فترة طويلة ، ولكن نظرًا لأن منحنيات رسم القماش مميزة تمامًا ، لم أحسبها بعد ، لذلك يجب أن أجربها خطوة بخطوة.
واحدة من الصعوبات في رسم منحنيات في قماش هي أنه يحتوي على 4 وظائف من المنحنيات! هم قوس ، arcto ، curveto التربيعية ، Beziercurveto. اسمحوا لي أن أبدأ بأبسط طريقة قوس.
تتمثل وظيفة ARC في رسم قوس منتظم ، والذي يمكن أن يكون دائرة كاملة أو قوسًا معينًا من الدائرة.
بناء جملة القوس كما يلي :سياق.
سأشرح معاييره ، وهذا هو
ARC (Center X ، Center Y ، RADIUS ، زاوية البدء ، زاوية النهاية ، أو ما إذا كانت عكس اتجاه عقارب الساعة)
ماذا يجب أن نفعل إذا رسمنا دائرة كاملة مع قوس؟ لاحظ الجميع أن هناك زاوية انطلاق وزاوية نهاية في المعلمات. إذا كانت زاوية البداية الخاصة بنا 0 وزاوية النهاية 360 ، فهل أنها دائرة مثالية؟
الحل الصحيح! ولكن تجدر الإشارة إلى أن الزاوية هنا يمثلها راديان (وكذلك فلاش). الدائرة الكاملة هي 360 درجة ، وهي 2PI راديان.
لذلك نكتب هذا :CTX.ARC (400،400،20،0 ، Math.PI*2) ؛
ctx.fill () ؛
ctx.stroke () ؛
مثل Lineto ، يعد ARC أيضًا طريقًا للرسم ، لذلك يتعين علينا استدعاء طريقة التعبئة أو السكتة الدماغية خلفها لإظهار الشكل (يتم استخدام Strokestyle Red وملء أحمر شفاف في الشكل).
الآن دعنا نرسم دائرة 1/4 ، الزاوية 90 درجة. كما ذكرنا سابقًا ، فإن زاوية 360 درجة هي 2PI راديان ، ثم زاوية 10 درجات هي 2PI/360 = PI/180 راديان ، ثم 90 درجة هي 2PI/360*90 = PI/2 راديان (يرجى حساب زوايا أخرى بنفسك).
CTX.ARC (400،400،20،0 ، Math.PI*2/4) ؛
من الشكل ، يمكننا تحديد أن درجة 0 من القوس هي درجة شائعة الاستخدام في الرياضيات ، ولكن يتم فتح الزاوية في اتجاه عقارب الساعة بشكل افتراضي ، والتي تعكس النموذج الرياضي (تتعلق بالإحداثيات ، لأن إحداثيات القماش هي أيضًا معاكسة للإحداثيات الرياضية).
ولكن أليس هناك معلمة أمامها تحدد ما إذا كانت عكس اتجاه عقارب الساعة؟ ماذا عن وضعناه إلى صحيح؟
CTX.ARC (400،400،20،0 ، MATH.PI*2/4 ، TRUE) ؛
سترى أن الزاوية تصبح عكس اتجاه عقارب الساعة ، مما تسبب في أن يصبح القوس 360-90 = 270 درجة.
لكن! شيء واحد يجب أن تهتم به هو أن طريقة الحساب لنقطة البداية ونقطة النهاية تعتمد دائمًا على 0 درجة وتمتد في اتجاه عقارب الساعة ، وليس هناك قول أن Cisco والعكس صحيح. عكس اتجاه عقارب الساعة هو مجرد اتجاه القوس.
هذا لا يمنع الالتباس من الذهاب ذهابًا وإيابًا فحسب ، بل يسهل حسابه أيضًا.
ومع ذلك ، فإن الاستخدام المرن لعكس اتجاه عقارب الساعة هو مفيد في بعض الأحيان.
في المثال أعلاه ، زاوية البداية الخاصة بنا هي 0. الآن لنجرب زوايا البداية الأخرى ، مثل 90 درجة.
CTX.ARC (400،400،20 ، Math.PI*2/4 ، Math.PI*2+Math.PI) ؛
إذا كانت نقطة البداية الخاصة بنا 90 درجة ونقطة النهاية هي 90 درجة ، فإن النتيجة هي أنه لا يمكن رسم أي شيء ، لذلك قمت بتغيير زاوية نقطة النهاية إلى 180 درجة وأخيراً حصلت على الشكل في الشكل أدناه.
سؤال : إذا رسمنا دائرة كاملة من نقطة انطلاق غير 6 درجة ، فهل هي على ما يرام؟ بالطبع ، من الممكن أيضًا ، طالما قمت بتعيين نقطة نهاية القوس إلى 360 درجة + زاوية البداية ، مثل:CTX.ARC (400،400،20 ، Math.PI*2/4 ، Math.PI*2+Math.PI*2/4) ؛ // نقطة البداية هي 90 درجة ، والنقطة النهائية هي 360+90 درجة
ومع ذلك ، فإن هذا النهج هو مجرد مسألة إيجاد المتاعب دون أي مشكلة ، ولن يستخدمها الأشخاص العاديون.
ملخص : طريقة قوس Canvas هي رسم أقواس منتظمة ، ويمكنك فقط رسم أقواس منتظمة ، ولا يمكنك رسم أقواس غريبة أخرى ، مثل S على شكل S-على الرغم من أنني أحب على شكل S أكثر.