Математические цветы: создаем красоту в HTML5 с помощью инструмента Canvas

7096
5

Еще несколько лет назад в дискуссиях мирового продакшн-сообщества насчет соперничества технологии 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-1Прекрасный пример “украшения” сайта оригинальными эффектами к тексту. Все буквы в надписи прорисованы при помощи элемента Canvas, то есть не являются шрифтом. В каждом разделе сайта используются свои эффекты – волны, кристаллы и даже цветы реагируют на движение мыши (чтобы убедиться, нужно перейти по ссылке, кликнув на картинку).

Еще один пример, где на элементе Canvas построен весь концепт дизайна сайта:

canvas-2Самая примитивная геометрия – точки – образует причудливый, а главное — интерактивный дизайн.

А это пример, в котором сочетается форматирование изображений, наложение фильтров на изображения и динамическая векторная графика:

canvas-3Просто? – Да! Впечатляет? – Еще бы!

И напоследок — пример, в котором технология Canvas используется не в качестве оригинального украшения, а для решения прямой маркетинговой задачи – продажи оправ/очков через интернет.

Какая самая основная сложность в онлайн-покупке очков или оправ? Невозможность осуществить примерку. Подключение web-приложения к веб-камере позволяет частично решить задачу. Вторая часть решается при помощи Canvas. А именно — приложение определяет лицо человека как объект (если точнее — прямоугольник). Накладывает на него фронтальное изображение оправы или очков. И далее позволяет вращать головой на 180 градусов, перерисовывая очки или оправы в зависимости от угла поворота головы. Очки при этом остаются в положенном месте – на носу.

Причем для реализации данного приложения необходимо всего 3 ракурса очков – фронтальный и два боковых. Все остальные ракурсы просчитываются по математическим моделям и отрисовываются динамически. При помощи элемента Canvas.

canvas-4Это лишь малость удачных решений, организованных при использовании данной технологии.

Для тех, кто заинтересовался – полезная ссылка. Удачи вам в творчестве, ведь не даром Canvas при дословном переводе означает «холст». Чувствуйте себя художником, но не забывайте, что все, даже самые современные технологии, должны быть уместны на вашем сайте, быть интересны пользователям и полезны владельцу сайта!

Автор: Ирина Муштина, эксперт Ассоциации Digital-продакшенов Украины «Центрифуга»

Оставить комментарий

Комментарии | 5

  • Не последнюю роль в «войне» форматов сыграл Стив Джобс, решивший выпускать гаджеты без поддержки данной технологии.

    Поле этой фразы понимаешь что человек ничего не знает о Flash и никогда не слышал про AIR на котором сделано очень много приложений для iOS и которые занимают первые позиции. Просто статья с кричащим заголовком «Flash мертв» и нулевым содержанием.

    А почему же тогда Flash не работает на Android? тоже кто-то запретил? Да нет же, просто Adobe отказались от поддержки Flash в мобильных браузерах и взялись за развитие AIR.

    • для веба (а статья о вебе) все таки флеш скорее мертв, чем жив. А на мобильных браузерах вылезло все то, что было не столь заметным на десктопах — флеш прожорлив, флеш тормозит.

      AIR все же немного другая технология, и конкуретны у нее другие (типа Corona, Marmalade и то же Unity3D)

      • статья может и о вебе, а комментарий к тем строкам которые были процитированы. никакой жирной точки Джобс не ставил.
        в вебе хтмл5 заменит только рекламу и красивые эффекты. тот же видео плеер нагружает процессор больше чем видео плеер написаный на флеше. если говорить про игры, то до уровня флеша всем еще очень далеко как по производительности так и по распространению и скорости разработки

Поиск