Wie man ein Bild verzerrt, um Fahnenschwingen im Wind Effekt mit html5 Leinwand

Question

Gegeben ein Bild, muss ich eine Animation des Bildes zu verzerren, als ob es eine Flagge im Wind ist, mit Javascript und einem HTML5 Canvas .

Bonus: Ich würde auch gerne diese Animation als PNG exportieren können.

Answer 1

Ich habe eine simple example einer Flagge im Wind winken erstellt. Es ist hässlich, weil ich die Flagge zeichne, um die Leinwand zu füllen (anstatt die Polsterung zu lassen, damit die Flagge hineinwinken kann), und weil ich keinen Versuch mache, Anti-Aliasing zu machen. Ich habe auch keinen Versuch unternommen, 3D-Shading bereitzustellen, was den Effekt unterstützen würde.

Ich kann 64fps mit einer 320px breiten Flagge in Chrome v8 auf meinem Computer bekommen. Wenn Sie die Geschwindigkeit selbst testen möchten, ändern Sie die fps in Zeile 59 in 1000 und entfernen Sie die Zeilen 63 und 82; Es gibt dann alle 100 Frames fps-Informationen an die Konsole aus.

Dies funktioniert nicht in IE8-, auch nicht mit ExCanvas, weil es dort keinen Mechanismus gibt, um auf einzelne Pixeldaten zuzugreifen.

Bearbeiten: Nur zum Spaß, habe ich die Probe aktualisiert, um die Wellen zu schattieren, wie sie durch das Bild gehen.

Edit2: Für mehr Spaß, fügte ich Padding der Flagge Zeichnung (kein Clipping mehr) und fügte ich einen "Squeeze" -Faktor, mit dem Sie die rechte Seite der Flagge größer oder kleiner als das Original (für Perspektive). Da es die Leistung etwas verlangsamt, habe ich es als a separate sample hochgeladen.