HTML5 Canvas (что это такое и почему его используют)

HTML5 включает в себя захватывающий элемент под названием CANVAS. Он имеет много применений, но чтобы его использовать, вам нужно выучить немного JavaScript, HTML, а иногда и CSS.

Это делает элемент CANVAS немного пугающим для многих дизайнеров, и на самом деле, большинство из них, вероятно, будут игнорировать этот элемент, пока не появятся надежные инструменты для создания анимаций и игр CANVAS без знания JavaScript.

Для чего используется HTML5 Canvas

Элемент HTML5 CANVAS может быть использован для многих вещей, которые раньше вам приходилось использовать для создания встроенного приложения, такого как Flash:

  • Динамическая графика
  • Онлайн и оффлайн игры
  • Анимации
  • Интерактивное видео и аудио

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

Если у нас есть вспышка, зачем нам холст?

Согласно спецификации HTML5, элементом CANVAS является: «… зависящее от разрешения растровое полотно, которое можно использовать для рендеринга графиков, игровой графики, художественных или других визуальных изображений на лету».

Элемент CANVAS позволяет рисовать графики, графику, игры, графику и другие визуальные элементы прямо на веб-странице в режиме реального времени.

Вы можете подумать, что мы уже можем сделать это с Flash, но между CANVAS и Flash есть два основных различия:

  1. Элемент CANVAS встроен прямо в HTML. Сценарии, которые рисуют на нем, находятся либо в HTML, либо в связанном внешнем файле. Это означает, что элемент CANVAS является частью объектной модели документа (DOM).
    1. Flash — это встроенный внешний файл. Для отображения он использует элемент EMBED или OBJECT и не может напрямую взаимодействовать с другими элементами HTML. Поскольку элемент CANVAS является частью DOM, он может взаимодействовать с DOM разными способами.
    2. Например, вы можете создать анимацию, которая изменяется при взаимодействии с какой-либо другой частью страницы, например при заполнении элемента формы. В Flash самое лучшее, что вы можете сделать, — это запустить Flash-ролик или анимацию, но с CANVAS вы можете создавать множество различных эффектов, даже добавляя текст из поля формы в анимацию.
  2. Элемент CANVAS изначально поддерживается веб-браузерами. Чтобы пользователи могли использовать Flash, в их браузере должен быть установлен плагин. Для большинства людей это часто становится проблемой из-за устаревшей установки Flash или из-за того, что их операционная система просто не поддерживает ее.
    1. Раньше плагин был установлен в каждом браузере, но это уже не так, и многие даже удаляют плагин из-за трудностей. Плюс, это даже не доступно на популярной платформе iOS.

    Холст полезен, даже если вы никогда не планировали использовать Flash

    Одна из главных причин, по которой элемент CANVAS настолько запутан, заключается в том, что многие дизайнеры привыкли к полностью статичной сети. Изображения могут быть анимированными, но это делается с помощью GIF, и, конечно, вы можете вставлять видео на страницы, но опять же, это статичное видео, которое просто помещается на странице и, возможно, запускается или останавливается из-за взаимодействия, но это все.

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

    Когда следует рассмотреть возможность использования элемента Canvas

    Ваша аудитория должна быть вашим первым соображением при принятии решения, использовать ли элемент CANVAS.

    Если ваша аудитория в основном использует Windows XP и IE 6, 7 или 8, то создание динамической функции Canvas будет бессмысленным, поскольку эти браузеры ее не поддерживают.

    Если вы создаете приложение, которое будет использоваться только на компьютерах с Windows, Flash может быть лучшим выбором. Приложение, которое будет использоваться на компьютерах Windows и Mac, может получить выгоду от приложения Silverlight.

    Однако если ваше приложение необходимо просматривать на мобильных устройствах (как на Android, так и на iOS), а также на современных настольных компьютерах (обновленных до последних версий браузера), то использование элемента CANVAS является хорошим выбором.

    Имейте в виду, что использование этого элемента позволяет вам иметь запасные варианты, такие как статические изображения, для старых браузеров, которые его не поддерживают.

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

    Согласно спецификации, вы должны использовать элементы, которые наиболее подходят для того, что вы пытаетесь построить. Поэтому использование элемента HEADER вместе с изображениями и текстом предпочтительнее элемента CANVAS для заголовка и логотипа.

    Кроме того, если вы создаете веб-страницу или приложение, которое предназначено для использования на неинтерактивном носителе, таком как печать, вы должны знать, что динамически обновляемый элемент CANVAS может печататься не так, как вы ожидаете. Вы можете получить распечатку текущего содержимого или резервного материала.

    Ссылка на основную публикацию