Vorläufige Studiennotizen zu Html5 Canvas (14) – Einfache Animationsimplementierung

Vorher handelte es sich um eine einfache Standbildzeichnung. Der Effekt ist wie folgt:

soll das Zeichen diagonal nach unten bewegen. Der Code lautet wie folgt:

Das ist es Besteht hauptsächlich aus zwei Funktionen. Erstens wird die Funktion init aufgerufen, wenn die Seite geladen wird. Schauen wir uns zunächst die Funktion init an >init Die Funktion enthält zunächst einige Sätze mit Initialisierungsinhalten, erhält den Kontext usw. und generiert dann ein Bildobjekt. Das Generieren eines Bildobjekts besteht hauptsächlich aus den folgenden Sätzen:

this.image = new Image();
this.image.src = "grossini.png";
this.image.onload = function(){
   setTimeout(update,33);
}

Dies wurde bereits erwähnt, hauptsächlich zuerst, wenn das

src-Pfadobjekt angegeben wird, und dann, wenn das onload gegeben wird Funktion aufgerufen wird, wir haben das Bild zuvor gezeichnet, hier rufen wir setTimeout auf, rufen ab und zu die Funktion update auf und Seine Funktion besteht darin, die Leinwand kontinuierlich zu aktualisieren.

Schauen wir uns die Funktion

Update an. Rufen Sie zuerst clearRect auf, um den Bildschirm zu löschen, und zeichnen Sie dann das Bild. und dann die Position des Protagonisten aktualisieren, schließlich setTimeout aufrufen und update in einer Schleife aufrufen lassen

Das Obige ist HTML5, Canvas, einfach. Achten Sie bei Animationsinhalten auf die chinesische PHP-Website (www.php.cn), um weitere verwandte Inhalte zu erhalten!