D1mex

Рисунок 9. Анимация с использованием изображений на нескольких тегах Canvas 
 

Пловец создается с помощью кода, показанного в листинге 7. Для создания воды используется линейный градиент. Вода имеет четыре оттенка синего цвета, что обеспечивает приемлемую иллюзию воды. Движение пловца создается посредством использования значений positionX и positionY, которые меняют позу изображения. Создание головы пловца осуществляется с помощью метода arc(). Ноги и руки пловца создаются посредством рисования линий и последующего изменения их положений с помощью lineTo(). Изменения туловища осуществляются посредством изменения положения с помощью moveTo(). Поскольку мы имеем дело с анимацией, то, чтобы увидеть движение пловца, необходимо исполнить данный код.

Листинг 7. Пример анимации

Заключение

HTML5-тег Canvas играет центральную роль при создании RIA-приложений на базе браузеров. Он предоставляет практичную среду рисования, базирующуюся на технологии JavaScript и ограниченную лишь воображением разработчика. Эта среда не слишком сложна для освоения. Кроме того, в Интернете имеется множество инструментов поддержки, облегчающих обучение и подготовку, включая краткие инструкции, блоги, онлайновые статьи, видео- и текстовые пособия, типовые приложения.

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