Jak zniekształcić obraz, aby utworzyć flagę Macha w efekt wiatru za pomocą HTML5 canvas
Biorąc pod uwagę obraz, muszę stworzyć animację zniekształconego obrazu, jakby to była flaga machająca na wietrze, używając javascript i płótna html5.
Bonus: chciałbym również móc eksportować tę animację jako png.
1 answers
Stworzyłem prosty przykład flagi machającej na wietrze. To jest brzydkie, ponieważ rysuję flagę, aby wypełnić płótno (zamiast zostawiać wyściółkę dla flagi do machnięcia) i dlatego, że nie podejmuję żadnej próby antyaliasingu. nie podjąłem też żadnej próby zapewnienia cieniowania 3D, które pomogłoby efektowi.
1000 i odkomentuj linie 63 i 82; następnie wyświetli informacje o fps co 100 klatek na konsolę.
To nie będzie działać w IE8 -, nawet z ExCanvas , ponieważ nie ma tam mechanizmu dostępu do poszczególnych pikseli.
Edit: dla Zabawy zaktualizowałem próbkę, aby przyciemnić zmarszczki podczas przechodzenia przez obraz.
Edit2: dla większej zabawy dodałem padding do rysunku flagi (koniec z przycinaniem) i dodałem czynnik 'squeeze', który pozwala na prawa strona flagi większa lub mniejsza od oryginału (dla perspektywy). Ponieważ trochę spowalnia wydajność, wgrałem go jako oddzielną próbkę .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-21 06:44:38