التعليق: أنا أتعلم HTML5 مؤخرًا ، والذي يتضمن عنصرًا مهمًا للغاية. بعد البحث والبحث ، سوف أدرك أخيرًا الرسوم المتحركة البسيطة لـ Super Mary. سوف أشاركها معك هنا ، وآمل أن يكون من المفيد للمبتدئين.
في الآونة الأخيرة ، كنت أتعلم HTML5 ، والذي يتضمن العناصر الحاسمة للغاية Canvas-Canvas. لقد قمت بتنزيل بعض رمز مصدر اللعبة على الإنترنت. على الرغم من أنني أستطيع أن أفهم ذلك ، إلا أنه لا يزال من الصعب استخراج وظيفة معينة بشكل منفصل. لذلك بحثت عن بعض الأمثلة على الإنترنت وأدركت الرسوم المتحركة البسيطة لسوبر ماري.وظيفة DrawImage () الرئيسية المشاركة في التصميم
(1) DrawImage (Image ، x ، y) هذه الطريقة هي الطريقة الأساسية للتشغيل. على وجه التحديد ، يشير إلى تصوير كائن الصورة بأكمله الذي تريد تشغيله على محور الإحداثيات المحدد ، حيث يكون الزاوية اليسرى العليا هو الأصل (0،0) لحساب الموضع الذي تريده لتصويره
(2) DrawImage (الصورة ، X ، Y ، العرض ، الارتفاع) تشير هذه الطريقة إلى تحجيم كائن الصورة الذي تحتاجه لتشغيله ثم تصوره على لوح Artboard. العرض والارتفاع هما الحجم الذي تريد رسم الصورة بعد رسمها.
(3) DrawImage (Image ، SourceX ، Sourcey ، SourceWidth ، SourceHight ، DeStx ، Desty ، Destwidth ، Destheight) هذه هي الطريقة الأكثر تعقيدًا ، لكنها مفيدة أيضًا. وهذا يعني أنه في كائن الصورة ، تريد تشغيله ، حدد موضع الزاوية اليسرى العلوية (SourceX ، Soundy) التي تريد وضعها ، ثم اعتراض العرض والارتفاع الذي تريده (SourceWidth ، SourceHight) ، وتصور الصورة المعتادة داخل الموضع المقابل (DeSex ، Desty) والمدى المقابل (DestWidth ، Testheight).
1. أولاً ، بحثت عن صور لحركات المشي المستمرة لـ Super Mary على الإنترنت (كما هو موضح أدناه)
2. قم بإنشاء ملف HTML5 جديد ، أطلق عليه اسم Mario.html هنا ، حدد عنصر القماش ، وبدء تشغيل زر بدء الرسوم المتحركة ، وزر إيقاف الرسوم المتحركة توقف
3. وظائف JS ذات الصلة