Kommentar: Ich lerne vor kurzem HTML5, das ein sehr kritisches Element-Leinwand-Canvas beinhaltet. Nach der Suche und Recherche werde ich endlich die einfache Animation von Super Mary erkennen. Ich werde es hier mit Ihnen teilen, ich hoffe, es wird für Anfänger hilfreich sein.
Kürzlich habe ich HTML5 gelernt, das das sehr kritische Element-Leinwand-Canvas betrifft. Ich habe einige Spielequellcode online heruntergeladen. Obwohl ich es verstehen kann, ist es immer noch schwierig, eine bestimmte Funktion getrennt zu extrahieren. Also suchte ich online nach Beispielen und erkannte die einfache Animation von Super Mary.Die am Design beteiligte Hauptfunktion (Drawimage ()
(1) Drawimage (Bild, x, y) Diese Methode ist die grundlegendste Betriebsmethode. Insbesondere bezieht es sich auf die Darstellung des gesamten Bildgegenstand
. Breite und Höhe sind die Größe, die das Bild nach dem Ziehen gezogen werden soll.
(3) Drawimage (Bild, Sourcex, Sourcey, SourceWidth, SourceHeight, Destx, Desty, Destwidth, Destheight) Dies ist die komplexeste Methode, aber auch sehr nützlich. Dies bedeutet, dass Sie in dem Bildobjekt, das Sie bedienen möchten, die obere linke Eckposition (Sourcex, Sourcey) auswählen möchten, dann die gewünschte Breite und Höhe (Quellbreite, SourceHeight) abfangen und das abgefangene Bild innerhalb der entsprechenden Position (Destx, Schicksal) und den entsprechenden Bereich (Destwidth, Destheight) darstellen.
1. Ich suchte zuerst nach Bildern von Super Marys kontinuierlichen Wanderbewegungen online (wie unten gezeigt)
2. Erstellen Sie hier eine neue HTML5 -Datei mit dem Namen mario.html, definieren
A. Verwandte JS -Funktionen