Предыдущий ролик Следующий ролик  

Видео урок: Реальный пример: The Wilderness Downtown

HTML5: графика и анимация с Canvas

Действительно классным примером использования HTML5 canvas, чтобы создать отличные эффекты, является сайт thewildernessdowntown.com. Это довольно впечатляющий сайт, созданный Аркадом Файером и некоторыми другими людьми. Я запускаю его в Google Chrome. Он действительно очень классный! Вы вводите адрес, и тогда сайт создает настроенное музыкальное видео, касающееся места, которое вы задали, дополненное некоторыми интересными эффектами HTML5 canvas.

Видите, если вы наводите мышкой на птиц, они разлетаются. Это действительно классно. Все, что вы сейчас видите, это HTML5. Давайте введем адрес, я использую студии звукозаписи lynda.com, и мы попадаем в прекрасную Вентуру в Калифорнии. Нажимаю Search. ОК, теперь сайт будет создавать это музыкальное видео. Вот, все готово, теперь мы можем посмотреть фильм. Теперь, когда вы смотрите ролик, я хочу отметить некоторые эффекты canvas.

(music playing) Во-первых, вы видите, как всплывает видео. (video playing) Это достигается прямо сейчас с помощью HTML5 video. (video playing) Итак, вот это пример, когда используется canvas, чтобы прорисовать птиц, летающих по небу.

Вы видите, что они до сих пор откликаются на движения моей мышки. (video playing) (video playing) Вот эта комбинация. У нас есть видео, использующее рисунок, отправленный сервисом Google Earth. Эти птицы здесь нарисованы при помощи HTML5 canvas, и вы видите, как разные окошки всплывают и исчезают.

HTML5 canvas используется для обработки рисунка. Рисунок сделан немного блеклым, чтобы он выглядел, как старый. Вот здесь виден эффект. То есть, цвета немного размыты при помощи эффектов canvas. (video playing) Вы видите, что сейчас рисунок повернут. Вот еще немного canvas с нашим местоположением.

Вы видите, что когда видео внизу поворачивается, оно синхронизируется с видео наверху. (video playing) Здесь довольно много эффектов и это отличное использование canvas.

Вы видите, что в конце сайт дает вам возможность написать себе маленькую открытку, и контекст будет записан при помощи HTML5 canvas, очень удачный пример использования canvas, улучшить существующие медиа, как видео, аудио, разные окна и это просто отличный опыт.