Canvas، أقوى واجهة في H5، تنفذ وظائف الرسومات الديناميكية

في المقالة الأخيرة، شاركنا كيفية استخدام القماش لرسم الرسومات، لكن الرسومات كانت كلها رسومات ثابتة. سنتعلم هذا الأسبوع كيفية استخدام القماش لرسم رسومات ديناميكية.

قبل أن نرسم الرسوم المتحركة، يجب أن نفهم ما هي الرسوم المتحركة ما هي الشروط الأساسية الدنيا المطلوبة للرسوم المتحركة؟

ما هي الأداة التي يمكننا استخدامها لإظهار الرسوم المتحركة؟

هذا هو تأثير الرسوم المتحركة المرسوم باستخدام PPT

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

هذا هو العنصر الأساسي لتنفيذ الرسوم المتحركة:

تشغيل صور متعددة بشكل مستمر لكل وحدة زمنية. يتم قياس وقت الوحدة هذا بشكل عام بالثواني للحصول على فيديو سلس بما فيه الكفاية في الرسومات المقدمة بواسطة الكمبيوتر، يجب أن يكون عدد الصور في الثانية أكبر من أو يساوي معدل تحديث الشاشة (معدل التحديث هذا بشكل عام هو 60 هرتز).

يجب أن تتغير حالة الكائنات في كل صورة (الحجم والشكل واللون والموضع والزاوية وما إلى ذلك).

فكيف ننفذ هذين الشرطين في القماش؟

يمكننا تحويل هذا إلى رسم بياني كل 1/60 ثانية. في JavaScript، إذا أردنا القيام بشيء ما بين الحين والآخر، فإن الطريقة التي نستخدمها هي استخدام الفاصل الزمني المحدد للمؤقت.

setinerval（function f(){}，t）， يمكن تمرير معلمتين إلى المؤقت، أحدهما هو الوظيفة والآخر هو الوقت. معنى هذا الرمز هو تنفيذ الوظيفة f كل t ms.

ثم نستخدم هذا لتحقيق ما نحتاجه لرسم رسم بياني كل 1/60 ثانية

 setInterval(function(){canCon.fillStyle=black;//canCon.fill يعني التقاط قلم لرسم رسومات صلبة على ورق الأرز هذا، //style=black يعني غمسه في الحبر الأسود//للنظر باستمرار ما عليك سوى التقاط قلم لرسم رسومات صلبة ولصقه بالحبر الأسود canCon.arc(233,233,66,0,Math.PI*2); // فكر في رسم دائرة على ورق الأرز (الموضع X للمركز، والموضع Y، ونصف قطر الدائرة، وأين تبدأ في رسم الدائرة، وأين تنتهي) canCon.fill(); ضربة للرسم},1000/60 )

التأثير النهائي

ولكن لا يوجد تأثير للرسوم المتحركة حتى الآن، لأن الرسومات الـ 60 المرسومة خلال ثانية واحدة كلها متماثلة تمامًا، لذلك يجب تغيير حالة العنصر عند رسم كل رسم.

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

(537-631-707)

كيفية تغيير حالة العنصر؟

يتم تحديد موضع الدائرة من خلال إحداثيات مركز الدائرة، حتى نتمكن من تغيير موضع العنصر في كل مرة نرسم فيها اللوحة القماشية.

 vari=100;// أعط موضعًا مركزيًا أوليًا للدائرة، وسيتحرك الموضع y لمركز الدائرة للأسفل بمقدار مسافة في كل مرة يتم رسمها setInterval(function(){canCon.fillStyle=black;// canCon.fill تعني التقط قلمًا لرسم أشكال صلبة على ورق الأرز هذا، //style=black يعني غمسه فيه حبر أسود // لتوصيله، ما عليك سوى التقاط قلم لرسم رسومات صلبة ولصقه بالحبر الأسود canCon.arc(233,y++,66,0,Math.PI*2);// على ورق الأرز تصور و ارسم دائرة (الموضع X لمركز الدائرة، والموضع Y، ونصف قطر الدائرة، وأين تبدأ رسم الدائرة، وأين تنتهي canCon.fill();// آخر ضربة للرسم})؛ ،1000/60)

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

 vari=100;// أعط موضعًا مركزيًا أوليًا للدائرة، وسيتحرك الموضع y لمركز الدائرة للأسفل بمقدار مسافة في كل مرة يتم رسمها setInterval(function(){canCon.clearRect(0, 0, 500، 500)؛// امسح إحداثيات الزاوية اليسرى العليا لمنطقة مستطيلة وعرض المستطيل وارتفاعه canCon.fillStyle=black;// معنى canCon.fill هو التقاط لوحة على هذا الأرز ورق قلم ذو رسومات صلبة، //style=black يعني غمسه بالحبر الأسود // لتجميعه، يعني التقاط قلم يرسم رسومات صلبة ولصقه بالحبر الأسود canCon.arc(233,y++,66 , 0,م ath.PI*2);// فكر في رسم دائرة على ورق الأرز (الموضع X لمركز الدائرة، والموضع Y، ونصف قطر الدائرة، حيث تبدأ رسم الدائرة وأين تنتهي canCon.fill(); );// ابدأ الرسم},1000/60)

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

 تختلف=100;// أعط موضعًا مركزيًا أوليًا للدائرة، وسيتحرك الموضع y لمركز الدائرة للأسفل بمقدار مسافة في كل مرة يتم رسمها setInterval(function(){canCon.beginPath();// ارفع القلم لأعلى canCon.clearRect(0, 0, 500, 500);// امسح إحداثيات الزاوية اليسرى العليا لمنطقة مستطيلة وإحداثيات المستطيل العرض والارتفاع canCon.fillStyle=black;//canCon.fill يعني التقاط قلم لرسم رسومات صلبة على ورق الأرز هذا، //style=black يعني غمسه في حبر أسود//إذا قمت بتوصيلهما معًا، إنه التقط قلمًا لرسم الأشكال الصلبة وألصقه بالحبر الأسود canCon.arc(233,y++,66,0,Math.PI*2); // فكر في رسم دائرة على ورق الأرز (الموضع X للمركز، والموضع Y، ونصف قطر الدائرة، وأين تبدأ في رسم الدائرة، وأين تنتهي) canCon.fill(); ضربة للرسم},1000/60 )

بهذه الطريقة يمكننا الحصول على دائرة متحركة

ما ورد أعلاه هو مقدمة المحرر لأقوى واجهة H5، اللوحة القماشية، لتنفيذ وظائف الرسومات الديناميكية، وآمل أن يكون ذلك مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!