Ttl; dr:
Мне нужно ОЧЕНЬ медленно перемещать изображение на холсте
без явного движения пиксель за пикселем. Мне нужно какое-то сглаживание.
Недавно мне было поручено анимировать некоторые «облачные» рисунки по горизонтали на веб-странице.
Достаточно легко я просто вставил изображение в DOM и использовал преобразования CSS3 с откатом на jQuery анимация для браузеров, которые еще не поддерживают преобразования CSS.
Все выглядело довольно хорошо. У меня было несколько облаков, плавно движущихся по странице.
Затем я продолжал получать запросы от дизайнера, чтобы замедлить движение ... вниз.
Поскольку браузеры не выполняют субпиксельный рендеринг для объектов DOM, анимация работает со скоростью 6 кадров в секунду.
Итак, я вставляю изображение в холст для некоторых быстрых тестов и обнаруживаю, что оно также не выполняет субпиксельный рендеринг автоматически.
Моя быстрая демонстрация анимации холста ] (он не определяет точное время движений, разберитесь с этим. :-p)