Я создал простой пример флага, развевающегося на ветру. Это уродливо, потому что я рисую флаг, чтобы заполнить холст (вместо того, чтобы оставлять отступы для флага, в который можно вложить), и потому что я не делаю никаких попыток сглаживания. Я также не делал никаких попыток обеспечить 3D-затенение, которое бы помогло эффекту.
Я могу получить 64 кадра в секунду с флагом шириной 320 пикселей в Chrome v8 на моей машине. Если вы хотите проверить скорость самостоятельно, измените fps в строке 59 на 1000 и раскомментируйте строки 63 и 82; затем он будет выводить информацию fps каждые 100 кадров на консоль.
Это не сработает в IE8-, даже с ExCanvas , потому что там нет механизма доступа к отдельным пиксельным данным.
Редактировать : Ради интереса я обновил образец, чтобы затенить рябь при прохождении изображения.
Edit2 : Для большего удовольствия я добавил отступ к чертежу флага (больше не нужно обрезать) и добавил коэффициент «сжатия», который позволяет сделать правую сторону флага больше или меньше, чем оригинал (для перспективы). Так как это немного замедляет производительность, я загрузил его как отдельный образец .
