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

Останні пости

Джордж Орвелл

Уся пропаганда війни, усі крики, брехня і ненависть, йдуть завжди від людей, які на цю…

14/06/2024

Фітосвічки Вагіфлорин для підтримки здоров’я жіночої флори від Рослина Карпат

    Фітосвічки Вагіфлорин: Підтримка Здоров’я Жіночої Флори Фітосвічки Вагіфлорин від компанії Рослина Карпат є ефективним засобом…

11/06/2024

Тренування грудей з гантелями та лавкою від Youtube канала Workout Guru

Вітаю вас, друзі! Ви коли-небудь замислювалися, як покращити тренування грудей, використовуючи гантелі та лавку? Це…

05/06/2024

Що таке порт (комп’ютерний) і навіщо він потрібен?

Оскільки різні комп’ютерні програми можуть використовувати різні процеси та/або служби, для їх розрізнення операційна система…

01/06/2024

Уроки PHP — Обробка помилок (можливі типи помилок)

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

30/05/2024

Як створити розумні торгові кампанії через Merchant Center?

Інтеграція Merchant Center з Google Рекламою відкриває доступ до такого ефективного типу кампаній, як Smart…

29/05/2024