HTML5 включает захватывающий элемент, называемый CANVAS. Он имеет множество применений, но для того, чтобы использовать его, вам нужно выучить некоторый JavaScript, HTML, и иногда CSS.
Это делает элемент CANVAS немного пугающим для многих дизайнеров, и на самом деле большинство, вероятно, проигнорирует элемент, пока не появятся надежные инструменты для создания анимации и игр CANVAS, не зная JavaScript.
Для чего используется холст HTML5
Элемент HTML5 CANVAS можно использовать для многих вещей, которые раньше вам приходилось использовать встроенное приложение, такое как Flash, для генерации:
- Динамическая графика
- Онлайн и офлайн игры
- Анимации
- Интерактивное видео и аудио
Фактически, основная причина, по которой люди используют элемент CANVAS, заключается в том, насколько легко превратить обычную веб-страницу. в динамическое веб-приложение, а затем преобразовать это приложение в мобильное приложение для использования на смартфонах и таблетки.
Если у нас есть Flash, зачем нам холст?
Согласно
Спецификация HTML5, элемент CANVAS: «... холст растрового изображения, зависящий от разрешения, который можно использовать для рендеринга графиков, игровой графики, искусства или других визуальных изображений на лету».Элемент CANVAS позволяет рисовать графики, графику, игры, искусство и другие визуальные эффекты прямо на веб-странице в режиме реального времени.
Вы можете подумать, что мы уже можем сделать это с помощью Flash, но между CANVAS и Flash есть два основных различия:
- Элемент CANVAS встроен прямо в HTML. Сценарии, использующие его, находятся либо в HTML, либо в связанном внешнем файле. Это означает, что элемент CANVAS является частью объектной модели документа (DOM).
- Flash - это встроенный внешний файл. Он использует для отображения элемент EMBED или OBJECT и не может напрямую взаимодействовать с другими элементами HTML. Поскольку элемент CANVAS является частью DOM, он может взаимодействовать с DOM разными способами.
- Например, вы можете создать анимацию, которая изменяется при взаимодействии с какой-либо другой частью страницы - например, при заполнении элемента формы. Максимум, что вы могли сделать с Flash, - это запустить Flash ролик или анимация, но с CANVAS вы можете создавать множество различных эффектов, даже добавляя текст из поля формы в анимацию.
- Элемент CANVAS изначально поддерживается веб-браузерами. Чтобы пользователи действительно могли использовать Flash, в их браузере должен быть установлен плагин. Это часто является проблемой для большинства людей из-за устаревших установок Flash или того факта, что их операционная система просто не поддерживает его.
- Раньше плагин был установлен в каждом браузере, но теперь это не так, и многие даже удаляют плагин из-за трудностей. К тому же его нет даже в популярных платформа iOS.
Холст полезен, даже если вы никогда не планировали использовать Flash
Одна из основных причин, по которой элемент CANVAS так сбивает с толку, заключается в том, что многие дизайнеры привыкли к полностью статичной сети. Изображения могут быть анимированными, но это делается с помощью Гифка, и, конечно же, вы можете встраивать видео в страницы, но опять же, это статическое видео, которое просто сидит на странице и, возможно, запускается или останавливается из-за взаимодействия, но это все.
Элемент CANVAS позволяет вам добавить гораздо больше интерактивности на ваши веб-страницы, потому что теперь вы можете динамически управлять графикой, изображениями и текстом с помощью языка сценариев. Элемент CANVAS помогает превращать изображения, фотографии, диаграммы и графики в анимированные элементы.
Когда следует использовать элемент Canvas
Ваша аудитория должна быть вашим первым соображением при принятии решения об использовании элемента CANVAS.
Если ваша аудитория в основном использует Windows XP и IE 6, 7 или 8, то создание динамической функции холста будет бессмысленным, поскольку эти браузеры не поддерживают ее.
Если вы создаете приложение, которое будет использоваться только на компьютерах с Windows, тогда лучше всего подойдет Flash. Приложение, предназначенное для использования на компьютерах Windows и Mac, может выиграть от приложения Silverlight.
Однако, если ваше приложение нужно просматривать на мобильных устройствах (как Android, так и iOS), а также на современных настольных компьютеров (обновленных до последних версий браузера), тогда использование элемента CANVAS будет хорошим выбором.
Имейте в виду, что использование этого элемента позволяет вам иметь резервные варианты, такие как статические изображения, для старых браузеров, которые его не поддерживают.
Однако не рекомендуется использовать холст HTML5 для всего. Вам следует никогда используйте его для таких вещей, как ваш логотип, заголовок или навигация (хотя было бы неплохо использовать его для анимации части любого из них).
Согласно спецификации, вы должны использовать элементы, наиболее подходящие для того, что вы пытаетесь построить. Таким образом, использование элемента HEADER вместе с изображениями и текстом предпочтительнее элемента CANVAS для вашего заголовка и логотипа.
Кроме того, если вы создаете страница в Интернете или приложение, которое предназначено для использования в неинтерактивном носителе, таком как печать, вы должны знать, что элемент CANVAS, который был динамически обновлен, может печатать не так, как вы ожидаете. Вы можете получить распечатку текущего содержимого или резервного содержимого.