تقدم هذه المقالة بشكل أساسي الطريقة البسيطة لاستخدام قماش HTML5 لرسم المنحنيات. إنها المعرفة الأساسية في مقدمة HTML5. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها.
طريقة المنحنى الخاصة بـ Canvas2D
في الآونة الأخيرة ، أدرس حساب الأجسام الناعمة ثلاثية الأبعاد ، لذلك أنا أضيف بعض المعرفة. غالبًا ما يتضمن بعض التحليل العددي ، وخاصة خوارزميات الاستيفاء المختلفة للمنحنيات. تذكرت فجأة أن Canvas2d نفسه يمكن أن يرسم منحنيات ، باستخدام منحنيات الباز التربيعية والمكعب. في الواقع ، لم أستخدم هذه الطريقة بعد ، دعنا نجربها الآن ~
هذه المقالة تدور حول رسم منحنى بسيط ، لذلك دعونا لا نتحدث عن الكثير من المبادئ المعقدة. علاوة على ذلك ، فإن مبدأ منحنى الباز نفسه بسيط للغاية ، يمكنك فهمه من خلال النظر إلى ويكيبيديا. في الواقع ، تستخدم العديد من أدوات رسم المنحنى البسيط منحنيات الباز. إذا كنت قد استخدمت المنحنيات في أدوات الرسم الخاصة بـ Windows ، فيجب أن تكون على دراية بها. يمكنك أولاً سحب خط مستقيم ثم انقر فوق موضع معين لجعل تطور الخط المستقيم. يحدد إجراء السحب الأولي قمة المنحنى ، ويضيف إجراء النقر النقطة الوسيطة. تستخدم أداة الرسم التي تأتي مع Windows منحنيات BAZ المكعبة ، ويمكنك إضافة نقطتين وسيطة. يختلف منحنى BATE عن الاستيفاء متعدد الحدود العام. يتم استخدام نقطة الوسيطة الخاصة بها فقط كنقطة تحكم ، وليس قمة الرأس التي يجب أن يمر المنحنى بها. ويمكن أن تجعل أيضا منحنيات مغلقة. يوفر Canvas2d طريقتين لرسم منحنيات
QuadraticCurveto: منحنى Baze التربيعي
Beziercurveto: منحنى إطار مكعب
يتم رسم الخط من الموضع الحالي ، ويمكن تحديد الموضع الحالي بواسطة طريقة Moveto. مع وضع بداية المنحنى ، هناك حاجة أيضًا إلى النقطة الوسيطة والموقف النهائي. فقط تمرير هذه الإحداثيات الموضع إلى وظيفة الرسم. على سبيل المثال ، يتطلب منحنى Batez التربيعي نقطة وسيطة ووضع نهائي ، لذلك يجب نقل إحداثيين إلى وظيفة QuadraticCurveto. تتكون الإحداثيات من X و Y ، مما يعني أن هذه الوظيفة لها 4 معلمات. Beziercurveto هو نفسه ، إلا أنه يحتوي على نقطتين وسيطة. دعونا نستخدمه الآن
CSS رمز نسخ المحتوى إلى الحافظة