Елемент <canvas> (від англ. canvas — полотно, полотно) створює область, в якій за допомогою JavaScript можна малювати різні об'єкти, виводити зображення, трансформувати їх та змінювати властивості. За допомогою <canvas> можна створювати малюнки, анімацію, ігри та ін.
Синтаксис
<canvas id="<ідентифікатор>"> </canvas>
Закриваючий тег
Обов'язковий.
Атрибути
- height
- Вказує висоту полотна. За замовчуванням 300 пікселів.
- width
- Встановлює ширину полотна. За промовчанням 150 пікселів.
Також для цього елемента доступні універсальні атрибути та події.
Приклад
<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
<meta charset="utf-8">
</head>
<body> <canvas id="smile" width="200" height="200"> <p>Ваш браузер не підтримує малювання.</p>
</canvas> <script> var drawingCanvas=document.getElementById('smile'); if(drawingCanvas && drawingCanvas.getContext) { var context=drawingCanvas.getContext('2d'); //Малюємо коло context.strokeStyle="#000"; context.fillStyle="#fc0"; context.beginPath(); context.arc(100,100,50,0,Math.PI*2,true); context.closePath(); context.stroke(); context.fill(); //Малюємо ліве око context.fillStyle="#fff"; context.beginPath(); context.arc(84,90,8,0,Math.PI*2,true); context.closePath(); context.stroke(); context.fill(); //Малюємо праве око context.beginPath(); context.arc(116,90,8,0,Math.PI*2,true); context.closePath(); context.stroke(); context.fill(); //Малюємо рот context.beginPath(); context.moveTo(70,115); context.quadraticCurveTo(100,130,130,115); context.quadraticCurveTo(100,150,70,115); context.closePath(); context.stroke(); context.fill(); }
</script>
</body>
</html>Результат прикладу показаний на мал. 1.
Мал. 1. Виведення зображення за допомогою <canvas>
Специфікація
| Специфікація | Статус |
|---|---|
| WHATWG HTML Living Standard | Живий стандарт |
| HTML5 | Рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як вона відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.
- Proposed Recommendation (Пропонована рекомендація) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження.
- Working Draft (Робочий проект) — більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою. правок редакторами проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Особняком стоїть живий стандарт HTML (Living) — він не дотримується традиційної нумерації версій, оскільки перебуває у постійній розробці та оновлюється регулярно.
Браузери
| 9 | 12 | 1 | 9 | 2 | 1.5 |
| 2.1 | 2 | 9 | 2 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — елемент повністю підтримується ється браузером;
- — елемент браузером не сприймається та ігнорується;
- — під час роботи можлива поява різних помилок, або елемент підтримується з застереженнями.
Число вказує версію браузреа, починаючи з якої елемент підтримується.