源图像:
Heim > Artikel > Web-Frontend > HTML5-Canvas-Zeichnungsmethode zum Erstellen von Animationseffekten. Beispiel_HTML5-Tutorial-Fähigkeiten
Demonstration des HTML5-Canvas-Animationseffekts
Hauptidee:
Bereiten Sie zuerst ein Bild mit aufeinanderfolgenden Frames vor und verwenden Sie dann die Zeichenmethode von HTML5 Canvas, um verschiedene Frames in unterschiedlichen Zeitintervallen zu zeichnen hört sich an, als ob eine Animation läuft.
Wichtige technische Punkte:
Die JavaScript-Funktion setTimeout() hat zwei Parameter. Der erste Parameter kann an eine JavaScript-Methode übergeben werden.
Der andere Parameter stellt das Intervall in Millisekunden dar . Codebeispiel:
setTimeout( update, 1000/30);
Die API-drawImage()-Methode von Canvas erfordert die Angabe aller 9 Parameter:
ctx.drawImage(myImage, offw, offh, width,height , x2 , y2, width, height);
wobei sich offw, offh auf den Startkoordinatenpunkt des Quellbildes bezieht, width, height die Breite und Höhe des Quellbildes darstellt, x2, y2 repräsentiert
die Position von das Quellbild im Ziel Der Startkoordinatenpunkt auf der Leinwand.
Der durch ein Wildgans-Flugbild mit 22 Bildern erzielte Effekt:
Quellenbild:
Programmcode:
Play Animations