Canvas

HTML

Canvas (англ. canvas — «полотно») — елемент HTML5, який можна застосовувати для малювання графіки використовуючи скрипти (переважно JavaScript). Наприклад його можна застосувати для малювання графів, створення фотокомпозицій а також анімації.

Втілення

Елемент <canvas> є частиною специфікації WHATWG HTML [Архівовано 1 травня 2021 у Wayback Machine.] та W3C HTML Canvas 2D Context [Архівовано 11 березня 2021 у Wayback Machine.].

<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>

Він дуже схожий на тег <img>, з тією лише різницею, що не містить атрибутів 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.

Див. також

Посилання


Інтернет Це незавершена стаття про Інтернет.
Ви можете допомогти проєкту, виправивши або дописавши її.