Учитывая изображение, мне нужно создать анимацию искажаемого изображения, как если бы он размахивал флагом на ветру, используя javascript и холст html5.
Бонус: я также хотел бы иметь возможность экспортировать эту анимацию в виде png.
Как исказить изображение, чтобы создать флаг, размахивающий ветром, используя html5 canvas
Ответ 1
Я создал простой пример флага, размахивающего ветром. Это уродливо, потому что я рисую флаг, чтобы заполнить холст (вместо того, чтобы оставлять заполнение для того, чтобы флаг входил в него), и потому, что я не делаю попыток сглаживания. Я также не делал попыток обеспечить трехмерное затенение, что помогло бы эффекту.
Я могу получить 64fps с флагом шириной 320 пикселей в Chrome v8 на моей машине. Если вы хотите проверить скорость самостоятельно, измените fps в строке 59 на 1000 и раскомментируйте строки 63 и 82; он затем выводит информацию о fps каждые 100 кадров на консоль.
Это не будет работать в IE8-, даже с ExCanvas, потому что нет механизма доступа к отдельным данным пикселя там.
Изменить: просто для удовольствия, я обновил образец, чтобы оттенять рябь, когда они проходят через изображение.
Edit2. Для большей забавы я добавил добавление к рисунку флага (не более обрезание), и я добавил коэффициент сжатия, который позволяет сделать правую сторону флага большим или меньшим, чем оригинал (для перспективы). Поскольку это немного замедляет производительность, я загрузил ее как отдельный образец.
