Что такое тег canvas в HTML5 и зачем он нужен?

Элемент <canvas> появился только в HTML5 и используется для динамического рисования графики на веб-странице с помощью JavaScript. Сам тег фактически представляет собой контейнер (хранилище) для графики, которая прорисовывается непосредственно в JavaScript.

Самое простое, что может canvas — это «нарисовать» контуры, прямоугольники, круги, текст, градиенты или добавить какое-нибудь изображение. Но простыми объектами дело не ограничивается, в canvas можно создать и довольно сложные элементы. И со временем вы в этом убедитесь. Вы даже сможете поиграть в простую, винтажную аркадную игру, которая создана с помощью канвес.

Чтобы начать работать с элементом <canvas> вам будет достаточно иметь базовые знания HTML и JavaScript. Тег имеет обязательный для указания атрибут id (на который мы затем ссылаемся в JS скриптах), а также желаемые атрибуты width (ширина) и height (высота), с помощью которых вы можете изменить стандартный размер полотна <canvas> (300px × 150px). Также, с помощью CSS стилей, элемент <canvas> можно стилизовать, как, например, любое обычное изображение: border, margin, background и т.д.

 

Зачем нужен тег canvas?

Простыми словами, если тег div является контейнером для других тегов, то тег canvas — представляет собой контейнер для графики (пикселей). В этом есть сходство с тегом <img>, помимо того, что вместо загрузки картинки в контейнер, в «канвес» вы можете нарисовать ее с помощью JavaScript кода.

Тег предоставляет холст для рисования, на котором вы можете создавать динамический и визуально привлекательный контент. Его можно использовать, например, для рисования графиков, рендеринга 2D-графики, манипуляций с картинками, создания простых анимаций и даже для разработки веб-игр.

 

Примеры применения canvas

1) Цифровые часы. В этом примере скрипт получает значение часа, минуты и секунды и прорисовывает их на холсте. Изменение происходит каждую секунду, в итоге мы получаем самые обычные цифровые часы.

 

2) Анимация статических картинок. Для этого примера я взял за основу отличную работу Szenia Zadvornykh — с помощью canvas происходит анимация статических картинок и тем самым достигается эффект толпы (условный час пик в большом городе).

Вот посмотрите, какое статическое изображение используется (105 разных персонажей):

 

А вот что происходит, когда в действие вступают <canvas> и JS скрипты:

 

3) Онлайн игра Break Bricks Game — классическая аркадная игра, в которой нужно уничтожить блоки (кирпичи) подвижным шариком:

 

 

Совместимость тега канвес с браузерами

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

Обязательно добавляйте резервный текст для альтернативы. Например, так:

<canvas id="canvas" width="750" height="150">
  Я дико извиняюсь, но ваш браузер не поддерживает тег <canvas> ( 
</canvas>

Этот резервный контент внутри тега будет отображаться в тех браузерах, которые не поддерживают <canvas> тег.

 

Благодарю за внимание!

 

This post was last modified on 10/05/2024 16:58

Последние посты

Джордж Оруэлл

Вся пропаганда войны, все крики, ложь и ненависть, исходят всегда от людей, которые на эту…

14/06/2024

Фитосвечи для поддержания здоровья женской флоры

    Фитосвечи: Поддержка Здоровья Женской Флоры Фитосвечи являются эффективным средством для улучшения функционального состояния…

11/06/2024

Тренировка груди с гантелями и скамейкой от Youtube канала

Приветствую вас, ребята! Вы когда-нибудь задумывались, как улучшить тренировку груди, используя гантели и лавку? Это…

05/06/2024

Что такое порт (компьютерный) и для чего он нужен?

Поскольку различные компьютерные приложения могут использовать различные процессы и/или службы, операционная система ПК на программном…

01/06/2024

Уроки PHP — Обработка ошибок (возможные типы ошибок)

В сегодняшнем теоретическом уроке мы рассмотрим сложный и важный вопрос в PHP — выявление и…

30/05/2024

Как создавать умные торговые кампании через Merchant Center?

Интеграция Merchant Center с Google Рекламой открывает доступ к такому эффективному типу кампаний, как Умные…

29/05/2024