HTML Тег <canvas>
Приклад
Намалюйте червоний прямокутник на льоту та покажіть його всередині елемента <canvas>:
<canvas id="myCanvas">
Ваш браузер не підтримує тег canvas.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
Спробуйте самі »
Більше прикладів "Спробуйте самі" далі.
Визначення та використання
Тег <canvas> використовується для малювання графіки на льоту за допомогою скриптів (зазвичай JavaScript).
Тег <canvas> прозорий і є лише контейнером для графіки, ви повинні використовувати скрипт, щоб фактично намалювати графіку.
Будь-який текст всередині елемента <canvas> відображатиметься у браузерах із вимкненим JavaScript і у браузерах, які не підтримують <canvas>.
Поради та нотатки
Порада: Дізнайтеся більше про елемент <canvas> в HTML Canvas Підручнику.
Порада: Щоб отримати повну довідку про всі властивості та методи, відвідайте HTML Canvas Довідник на нашому сайті W3Schools українською.
Підтримка браузерами
Числа в таблиці вказують на першу версію браузера, яка повністю підтримує елемент.
| Елемент | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Атрибути
| Атрибут | Значення | Опис |
|---|---|---|
| height | pixels | Визначає висоту canvas. Значення за замовчуванням 150 |
| width | pixels | Визначає ширину полотна. Значення за замовчуванням 300 |
Глобальні атрибути
Тег <canvas> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <canvas> також підтримує Атрибути подій в HTML.
Більше прикладів
Приклад
Інший <canvas> приклад:
<canvas id="myCanvas">
Ваш браузер не підтримує тег canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
//Увімкніть прозорість
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>
Спробуйте самі »
CSS налаштування за замовчуванням
Більшість браузерів будуть відображати елемент <canvas> з наступними значеннями за замовчуванням:
