HTML5 verwendet Canvas, um einfache Animationen von Super Mario_html5-Tutorial-Fähigkeiten zu implementieren

Vor kurzem habe ich HTML5 gelernt, das ein sehr wichtiges Element, Canvas, beinhaltet. Ich habe einige Spielquellcodes aus dem Internet heruntergeladen, obwohl es immer noch schwierig ist, eine bestimmte Funktion einzeln zu extrahieren, also bin ich wieder online gegangen. Nachdem ich nach einigen Beispielen gesucht hatte, wurde mir die einfache Animation von Super Mario klar.

Die am Design beteiligte Hauptfunktion drawImage()

(1) drawImage(image,x,y) Diese Methode ist die grundlegendste Operationsmethode, insbesondere It bedeutet, das gesamte Bildobjekt, das Sie bearbeiten möchten, auf der angegebenen Koordinatenachse zu zeichnen, mit der oberen linken Ecke als (0, 0)-Ursprung, um die Position zu berechnen, an der es gezeichnet werden soll
(2) drawImage(image, x, y, Breite, Höhe) Bei dieser Methode wird das zu bedienende Bildobjekt skaliert und dann auf dem Zeichenbrett gezeichnet. Breite und Höhe entsprechen der Größe, die das Bild nach dem Zeichnen haben soll
(3) drawImage (image, sourceX, sourceY ,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight) Dies ist der komplizierteste Weg, aber auch sehr nützlich. Dies bedeutet, dass Sie in dem Bildobjekt, das Sie bearbeiten möchten, die Position in der oberen linken Ecke auswählen, die Sie positionieren möchten (QuelleX, QuelleY), dann die gewünschte Breite und Höhe abfangen (Quellenbreite, Quellenhöhe) und das abgefangene Bild auf die Zeichenfläche zeichnen Innerhalb der entsprechenden Position (destX, destY) und des entsprechenden Bereichs (destWidth, destHeight).

1. Zuerst habe ich online nach Bildern von Super Marios kontinuierlichen Laufbewegungen gesucht (wie unten gezeigt)

2. Erstellen Sie hier eine neue HTML5-Datei mit dem Namen mario.html Canvas-Element definieren, Schaltfläche zum Starten der Animation und Schaltfläche zum Anhalten der Animation

3. Verwandte js-Funktionen