Еще несколько лет назад в дискуссиях мирового продакшн-сообщества насчет соперничества технологии Adobe Flash и HTML5, сменяющим предыдущую четвертую версию, сложно было встать на чью-то сторону. Ведь в те времена самыми модными и «дорогими» сайтами считались именно страницы, на которых использовалась Flash-анимация в виде отдельных роликов, заставок или красивых навигационных элементов. А высшей точкой мастерства продакшенов (и их продажников) были сайты, полностью реализованные на Flash. Не последнюю роль в «войне» форматов сыграл Стив Джобс, решивший выпускать гаджеты без поддержки данной технологии.
Джобс, к сожалению, уже не с нами, а дело его живет: на наших глазах HTML5 в связке с языком программирования JavaScript превращает Flash в антиквариат. При помощи HTML5 можно творить настоящие чудеса, но сейчас хочу остановиться подробнее только на одном его элементе – Canvas.
Тег Canvas – это мегакреативный инструмент, использующий JavaScript для рисования и анимации. Основным преимуществом получаемой анимации является то, что все выполнение кода и моделирование графических элементов происходит на стороне пользователя – на веб-странице и в режиме онлайн.
Итак, чем хорош Canvas?
- Canvas прост. Если вы знаете JavaScript и имели опыт работы с графикой через примитивные 2D-API, разобраться с Canvas вам не составит труда. Интерфейс Canvas действительно интуитивно понятен: есть около 40 методов и 20 атрибутов, которые вы легко можете разбить для себя на несколько групп.
- Canvas быстр. Примитивен и потому быстр. Поддерживает аппаратное ускорение – и потому быстр. Canvas спроектирован так, чтобы быть быстрым, хотя какие-то вещи и могут на первый взгляд показаться непрактичными – например, сначала нужно визуализировать все элементы, используя максимальную детализацию, а только потом их смоделировать.
- Canvas сочетаем — это обычный HTML5-элемент и его можно вставить в любое место страницы. Canvas можно комбинировать с видео, изображениями и другими canvas.
А теперь несколько конкретных жизненных примеров.
Работа с изображениями
Что можем делать? Форматировать, менять размеры, положение картинки, накладывать фильтры, имитировать 3D-эффект.
Динамическая графика
Что можем делать? При помощи простых геометрических объектов: линии, прямоугольника, дуги, кривых, кругов и полукругов, градиентов – создавать любые графические объекты, которые можно представить в виде этих фигур. Например, стаю птичек, волны или даже северное сияние.
Прекрасный пример “украшения” сайта оригинальными эффектами к тексту. Все буквы в надписи прорисованы при помощи элемента Canvas, то есть не являются шрифтом. В каждом разделе сайта используются свои эффекты – волны, кристаллы и даже цветы реагируют на движение мыши (чтобы убедиться, нужно перейти по ссылке, кликнув на картинку).
Еще один пример, где на элементе Canvas построен весь концепт дизайна сайта:
Самая примитивная геометрия – точки – образует причудливый, а главное – интерактивный дизайн.
А это пример, в котором сочетается форматирование изображений, наложение фильтров на изображения и динамическая векторная графика:
Просто? – Да! Впечатляет? – Еще бы!
И напоследок – пример, в котором технология Canvas используется не в качестве оригинального украшения, а для решения прямой маркетинговой задачи – продажи оправ/очков через интернет.
Какая самая основная сложность в онлайн-покупке очков или оправ? Невозможность осуществить примерку. Подключение web-приложения к веб-камере позволяет частично решить задачу. Вторая часть решается при помощи Canvas. А именно – приложение определяет лицо человека как объект (если точнее – прямоугольник). Накладывает на него фронтальное изображение оправы или очков. И далее позволяет вращать головой на 180 градусов, перерисовывая очки или оправы в зависимости от угла поворота головы. Очки при этом остаются в положенном месте – на носу.
Причем для реализации данного приложения необходимо всего 3 ракурса очков – фронтальный и два боковых. Все остальные ракурсы просчитываются по математическим моделям и отрисовываются динамически. При помощи элемента Canvas.
Это лишь малость удачных решений, организованных при использовании данной технологии.
Для тех, кто заинтересовался – полезная ссылка. Удачи вам в творчестве, ведь не даром Canvas при дословном переводе означает «холст». Чувствуйте себя художником, но не забывайте, что все, даже самые современные технологии, должны быть уместны на вашем сайте, быть интересны пользователям и полезны владельцу сайта!
Автор: Ирина Муштина, эксперт Ассоциации Digital-продакшенов Украины «Центрифуга»
