ความคิดเห็น: ฉันกำลังเรียนรู้ HTML5 เมื่อเร็ว ๆ นี้ซึ่งเกี่ยวข้องกับองค์ประกอบที่สำคัญมาก Canvas-Canvas หลังจากการค้นหาและการวิจัยในที่สุดฉันก็จะตระหนักถึงภาพเคลื่อนไหวที่เรียบง่ายของ Super Mary ฉันจะแบ่งปันกับคุณที่นี่ฉันหวังว่ามันจะเป็นประโยชน์สำหรับผู้เริ่มต้น
เมื่อเร็ว ๆ นี้ฉันได้เรียนรู้ HTML5 ซึ่งเกี่ยวข้องกับองค์ประกอบที่สำคัญมาก Canvas-Canvas ฉันดาวน์โหลดซอร์สโค้ดเกมออนไลน์ แม้ว่าฉันจะเข้าใจได้ แต่ก็ยังยากที่จะแยกฟังก์ชั่นบางอย่างแยกกัน ดังนั้นฉันจึงค้นหาตัวอย่างออนไลน์และตระหนักถึงภาพเคลื่อนไหวที่เรียบง่ายของ Super Maryฟังก์ชั่นหลัก drawimage () ที่เกี่ยวข้องในการออกแบบ
(1) DrawImage (Image, X, Y) วิธีนี้เป็นวิธีการทำงานขั้นพื้นฐานที่สุด โดยเฉพาะมันหมายถึงการแสดงวัตถุภาพทั้งหมดที่คุณต้องการทำงานบนแกนพิกัดที่ระบุโดยมุมบนซ้ายเป็นจุดกำเนิด (0,0) เพื่อคำนวณตำแหน่งที่คุณต้องการให้มันแสดงให้เห็น
(2) DrawImage (Image, X, Y, ความกว้าง, ความสูง) วิธีนี้หมายถึงการปรับขนาดวัตถุภาพที่คุณต้องการใช้งานแล้วแสดงให้เห็นบน artboard ความกว้างและความสูงเป็นขนาดที่คุณต้องการให้ภาพวาดหลังจากวาด
(3) DrawImage (Image, Sourcex, Sourcey, SourceWidth, SourceHeight, Destx, Desty, Destwidth, Destheight) นี่เป็นวิธีที่ซับซ้อนที่สุด แต่ก็มีประโยชน์เช่นกัน หมายความว่าในวัตถุภาพที่คุณต้องการใช้งานเลือกตำแหน่งมุมซ้ายบน (SourceX, SourceY) ที่คุณต้องการตำแหน่งจากนั้นสกัดกั้นความกว้างและความสูงที่คุณต้องการ (SourceWidth, SourceHeight) และแสดงภาพที่ถูกสกัดกั้นภายในตำแหน่งที่สอดคล้องกัน
1. ก่อนอื่นฉันค้นหารูปภาพการเคลื่อนไหวเดินอย่างต่อเนื่องของ Super Mary ทางออนไลน์ (ดังที่แสดงด้านล่าง)
2. สร้างไฟล์ HTML5 ใหม่ชื่อมัน mario.html ที่นี่กำหนดองค์ประกอบ Canvas, เริ่มปุ่มเริ่มต้นภาพเคลื่อนไหวและปุ่มหยุดเคลื่อนไหวหยุดชั่วคราวชั่วคราว
3. ฟังก์ชั่น JS ที่เกี่ยวข้อง