Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить елемент <canvas>?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`<canvas>`** - це HTML-елемент, який створює на сторінці порожню область для малювання, а вся графіка (фігури, текст, анімації, 3D) додається через JavaScript API. **Ключове:** малювання відбувається через контекст (`getContext('2d')` або `getContext('webgl')`), а без скрипту `<canvas>` залишається просто порожнім прямокутником.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняЕлемент `<canvas>` створює на веб-сторінці **область для малювання**, де за допомогою JavaScript можна **динамічно малювати графіку**, анімацію, графіки, ігри, візуалізації і навіть 3D-об'єкти. Сам по собі `<canvas>` - це **порожній контейнер**, як полотно в Photoshop: без коду: просто прямокутник; з JavaScript: живе інтерактивне полотно. --- ### 1. Найпростіший приклад ```html <canvas id="myCanvas" width="300" height="200"></canvas> ``` Що відбувається: - створюється область 300×200 пікселів; - типово: прозора і порожня; - без скрипту нічого не відрендериться. --- ### 2. Як з ним працювати Малювання виконується через JavaScript-API: спочатку отримуємо «контекст» (об'єкт для малювання), потім викликаємо методи. Приклад: намалювати коло: ```html <canvas id="myCanvas" width="300" height="200"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 2D-контекст малювання ctx.fillStyle = 'skyblue'; ctx.beginPath(); ctx.arc(150, 100, 70, 0, Math.PI * 2); // центр x,y, радіус, кути ctx.fill(); </script> ``` Результат: на сторінці з'явиться блакитне коло. --- ### 3. Основні режими контексту | Тип контексту | Призначення | |---|---| | `"2d"` | Робота зі звичайною двовимірною графікою (фігури, лінії, текст, зображення) | | `"webgl"` | Тривимірна графіка з апаратним прискоренням (через WebGL API) | Приклад: ```js const ctx = canvas.getContext('webgl'); ``` --- ### 4. Що можна малювати на `<canvas>` - фігури (лінії, прямокутники, кола); - текст і шрифти; - растрові зображення; - анімації (через `requestAnimationFrame`); - візуалізації даних, ігри, 3D-сцени. --- ### 5. Важливі атрибути | Атрибут | Призначення | Приклад | |---|---|---| | `width` | ширина полотна в пікселях | `width="500"` | | `height` | висота полотна | `height="300"` | | *(якщо не задані)* | типово `300×150` | - | Розміри **потрібно задавати атрибутами**, а не CSS, інакше картинка може спотворюватися під час масштабування. --- ### 6. Приклад: малювання тексту ```js ctx.font = "24px Arial"; ctx.fillStyle = "darkred"; ctx.fillText("Hello, Canvas!", 50, 100); ``` --- ### 7. Приклад: анімація ```js let x = 0; function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillRect(x, 50, 50, 50); x += 2; requestAnimationFrame(animate); } animate(); ``` Квадрат буде плавно рухатися праворуч. --- ### Підсумок: | Властивість | Значення | |---|---| | Тег | `<canvas>` | | Призначення | Полотно для динамічного малювання через JavaScript | | Контекст | `2d` або `webgl` | | Особливість | Сам по собі порожній: усе малює скрипт | | Застосування | Ігри, графіки, анімації, візуалізація даних, ефекти | --- **Простими словами:** `<canvas>` - це **цифрове полотно**, на якому ти можеш малювати все, що завгодно, від простих фігур до складних інтерактивних сцен, якщо у тебе є пензель, тобто JavaScript.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.