Heim > Web-Frontend > H5-Tutorial > Hauptteil

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

黄舟
Freigeben: 2017-02-28 16:10:14
Original
1454 Leute haben es durchsucht

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);
}
Nach dem Login kopieren
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!



Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage