Що таке тег 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> тег.

 

Дякую за увагу!

 

Recent Posts

Чи можлива анонімність, конфіденційність чи приватність в Інтернеті?

Сьогоднішній огляд присвячений людям, для яких важливе питання конфіденційності в Інтернеті, та хто цінує свої…

5 днів ago

Як з’явився Pro Plan: шлях від ідеї до світового успіху

Вперше про бренд Pro Plan почули у 1986 році, коли він став частиною американської компанії…

1 тиждень ago

Стефан Цвейг

Страх покарання гірше самого покарання (Покарання — завжди щось конкретне, і воно все ж краще,…

1 тиждень ago

Чи можна знайти доступний хостинг у 2024 році?

Якщо ви плануєте розмістити веб-сайт в мережі Інтернет, дуже важливо знайти для нього швидкий і…

2 тижні ago

Чому обрати освіту за кордоном: переваги для майбутнього вашої дитини

Навчання за кордоном вже давно асоціюється з якісною освітою, новими можливостями та безліччю перспектив. Але…

2 тижні ago

Як вибрати майстра для перетяжки меблів?

Вибір майстра для ремонту та перетяжки меблів – завдання, яке потребує вдумливого підходу. Адже від…

3 тижні ago