HTML Canvas Підручник

HTML елемент <canvas> використовується для малювання графіки на вебсторінці.

Графік вище створено за допомогою <canvas>.

Він показує чотири елементи: червоний прямокутник, градієнтний прямокутник, багатоколірний прямокутник і багатоколірний текст.

Що таке HTML Canvas?

HTML елемент <canvas> використовується для малювання графіки на льоту за допомогою скриптів (зазвичай JavaScript).

Елемент <canvas> є лише контейнером для графіки. Ви повинні використовувати скрипт, щоб фактично намалювати графіку.

Canvas має кілька методів малювання контурів, прямокутників, кіл, тексту та додавання зображень.

Підтримка браузерами

Цифри в таблиці вказують на першу версію браузера, яка повністю підтримує елемент <canvas>.

HTML Canvas може малювати текст

Canvas може малювати кольоровий текст з анімацією чи без неї.

HTML Canvas може малювати графіку

Canvas має чудові функції для графічного представлення даних із зображенням графіків та діаграм.

HTML Canvas можна анімувати

Об’єкти Canvas можуть рухатися. Можливо все: від простих стрибаючих м’ячів до складних анімацій.

HTML Canvas може бути інтерактивним

Canvas може реагувати на події JavaScript.

Canvas може реагувати на будь-яку дію користувача (клацання клавішами, клацаннями миші, клацаннями кнопок, рухами пальців).

HTML Canvas можна використовувати в іграх

Методи Canvas для анімації пропонують багато можливостей для ігрових програм HTML.

Приклад Canvas

У HTML елемент <canvas> виглядає так:

Елемент <canvas> повинен мати атрибут id, щоб на нього міг посилатися JavaScript.

Атрибути width та height (ширина та висота) необхідні для визначення розміру canvas.

Порада. Ви можете мати кілька елементів <canvas> на одній HTML сторінці.

Щоб додати межу, використовуйте атрибут style:

У наступних розділах показано, як малювати в canvas.