Canvas ( — «полотно») — елемент HTML5, який можна застосовувати для малювання графіки використовуючи скрипти (переважно JavaScript). Наприклад його можна застосувати для малювання графів, створення фотокомпозицій а також анімації.
Втілення Елемент <canvas> є частиною специфікації WHATWG HTML та W3C HTML Canvas 2D Context .
<canvas> вперше було втілено Apple в Mac OS X Dashboard та Safari 3.1. У Gecko підтримка <canvas> з'явилася у версії Firefox 1.5, у Presto з версії 9.0 веббраузера Opera, а Internet Explorer підтримує <canvas> починаючи з 9-ї версії.
Щоб відобразити <canvas> в html-документі, слід використати наступний код:
<canvas id="tutorial" width="150" height="150"> </canvas>
Він дуже схожий на тег , з тією лише різницею, що не містить атрибутів src і alt. Елемент <canvas> має всього два атрибути — width і height. Обидва вони не є обов'язковими, і можуть бути задані через властивості DOM. Якщо ширина і висота не визначені, <canvas> буде створений шириною в 300 пікселів і 150 пікселів заввишки. Розмір елемента може бути довільним і задаватися через CSS, але при промальовуванні картинка масштабується відповідно до компонування.
Атрибут id не є специфічним для елемента <canvas>, але є одним з атрибутів HTML за замовчуванням, і може бути застосований майже до всіх елементів HTML (також як class, наприклад). Завжди визначати id елемента — гарна ідея, тому що це значно спрощує ідентифікацію його за допомогою скриптів.
Стиль елемента <canvas> може налаштовуватися також, як і звичайне зображення через CSS (margin, border, background, і т.п.). Ці правила, проте, не впливають на саме малювання в <canvas>. Якщо ніякі налаштування стилю не задані, <canvas> буде створений повністю прозорим.
Аварійний стан
У зв'язку з тим, що елемент <canvas> відносно новий, і не реалізований в деяких браузерах (таких як Firefox 1.0 та Internet Explorer), нам необхідно надати якийсь аварійний вміст елементу, якщо браузер цей елемент не підтримує.
Це дуже просто: ми лише надаємо альтернативний вміст всередині елемента <canvas>. Браузери, які не підтримують <canvas>, проігнорують контейнер і оброблять аварійний вміст всередині нього. Браузери ж, що підтримують <canvas>, проігнорують вміст контейнера і нормально оброблять <canvas>.
Приміром, ми можемо видати текстовий опис вмісту <canvas>, або показати статичну картинку замість динамічно намальованого вмісту. Це може виглядати приблизно так:
<canvas id="photo" width="150" height="150"> Використовуйте сучасніший браузер! </canvas>
Або
<canvas id="photo" width="150" height="150"> <img src="images/photo.jpg" width="150" height="150" /> </canvas>
<canvas> створює поверхню для малювання, яка надає один або більше контекстів для відтворення, який використовується для створення відображуваного контенту і маніпуляцій з ним. Ми сфокусуємо на 2D (двомірному) контексті відтворення, який в наш час є єдиним певним контекстом. У майбутньому інші контексти зможуть підтримувати інші види відтворення: наприклад, цілком ймовірно, що буде додано 3D контекст, заснований на OpenGL ES.
<canvas> спочатку порожній, і для того, щоб що-небудь відобразити, скрипту необхідно отримати контекст відтворення і малювати вже на ньому. Елемент <canvas> має DOM-метод getContext і призначений для отримання контексту відтворення разом з його функціями малювання. getContext () приймає один параметр — тип контексту
var canvas = document.getElementById ('tutorial'); var ctx = canvas.getContext ('2d');
Першим рядком ми отримуємо DOM-вузол нашого <canvas>, використовуючи метод getElementById. А отримати доступ до контексту малювання ми можемо методом getContext.
Див. також Scalable Vector Graphics WebGL Векторна графіка Растрова графіка
Посилання Специфікація від WHATWG Специфікація від W3C Специфікація від W3C, переклад на російську Applications, games, tools and tutorials using HTML5 canvas and JavaScript - Canvas Demos HTML5 Canvas Tutorials HTML5 Canvas Cheat Sheet Kevs3D - HTML5 Canvas demos by Kevin Roast HTML5 Canvas Scratch Pad explorercanvas - HTML5 Canvas for Internet Explorer - Google Project Hosting Canvas - HTML | MDN (ru) Canvas tutorial - Web developer guide | MDN (ru) Canvas - Web API Interfaces | MDN (en) Canvas tutorial - Web API Interfaces | MDN (en) Demo Studio | MDN (ru) Demo Studio | MDN (en)