НОУ ІНТУІТ, Лекція, HTML5

Залишився ще один елемент, який не можна не розглянути, у контексті вивчення HTML5, а саме canvas > , або полотно. Полотно використовується для розміщення зображень на веб-сторінці, у тому числі динамічних.

До появи полотна, за необхідності розміщення динамічного зображення потрібно було або створюватиphp- скрипт , абоflash- анімацію . В окремих випадках можливо було використовувати засоби Java Applet або ActiveX.

Усі три вказані способи вимагають наявності встановленого плагіна , АActiveX- працюють тільки вInternet Explorer. Якщо врахувати можливість наявності на стороні користувача програмного забезпечення, що блокує завантаженняflash– роликів і зображень, то розміщення зображення на веб-сторінці, тим більше динамічного, перестає здаватися тривіальним завданням. Метою веб-розробника також є гарантоване отримання користувачем всієї необхідної інформації.

Розглянемо, що ж з урахуванням сучасних умов, може запропонувати canvas > розробнику.

canvas > — це новий елемент html5, який дозволяє створювати зображення на сайті за допомогою веб-сценаріїв.

На сьогоднішній день canvas частіше використовується для побудови графіків, простої анімації та ігор у веб-браузерах.

Елемент canvas > схожий елемент img > , відмінність у тому що він не має атрибутів src і alt . У canvas > є тільки 2 атрибути – ширина та висота. Якщо ці атрибути відсутні, то ширина за замовчуванням дорівнюватиме 300 пікселів , а висота 150 пікселів .

Основи концепції

Єдиним підтримуваним на даний момент є двовимірний контекст відтворення, У майбутньому швидше за все буде додано 3D контекст.

Розміщується на HTML-сторінці canvas > наступним чином:

Щоб програмним шляхом використовувати полотно, насамперед необхідно одержати йогоконтекст(context). Після цього можна виконати необхідні дії по відношенню до контексту, а потім остаточно застосувати його результат. Тобто. безпосередньо відмальовування відбувається після того, як всі дії по відношенню до полотна визначені.

З урахуванням того, що canvas > підтримується не всіма браузерами або їх версіями, розробникам рекомендують використовувати його тільки в тих завданнях, де полотно не може бути замінене іншими елементами.

На момент написання лекції було заявлено базову підтримку canvas > наступними браузерами:

  • Internet Explorer9
  • Firefox(версії 9 - 12)
  • Chrome(версії 17 - 18)
  • Safari(версії 5.0 – 5.1)
  • Opera(11.6)
  • iOS Safari5.0
  • Opera Mobile12.0
  • Andro >

У випадку, якщо до веб-сторінки, що містить полотно, звернулися за допомогою браузера, який не підтримує даний елемент, користувач побачить вміст, розміщений у парному тегу canvas > . Такий вміст називається альтернативним або аварійним. Наприклад:

Зрозуміло, як аварійний вміст може бути використаний не тільки текст.

Малювання на полотні

Перед початком малювання необхідно отримати екземпляр об'єкта Web-браузера CanvasRenderingContext2D для цієї канви. Це виконується викликом єдиного методу getContext об'єкта HTMLCanvasElement. Наприклад:

Метод getContext приймає єдиний параметр - рядок "2d". Повертає метод екземпляр об'єкта CanvasRenderingContext2Dконтекст малювання цієї канви.

Після цього можна починати малювати на полотні за допомогою дуже різних властивостей та методів об'єкта CanvasRenderingContext2D, які будуть детальніше розглянуті у заключній лекції та практичних заняттях.

CSS та елемент canvas

Canvas може мати такі ж атрибути стилю як і img > (margin, border, background і т.д.). Якщо стиль не заданий, спочатку він повністю прозорий.

Як і у більшості елементів HTML , для додавання рамок, пробілів, полів і т.п. елемент canvas можна використовувати CSS-стилі. Крім того, деякі атрибути CSS успадковуються вмістом canvas. Хорошим прикладом цього можуть служити шрифти, оскільки за умовчанням до шрифтів, що малюються на полотні, застосовуються настройки, що використовуються для елемента canvas .

Ключові терміни та визначення

Аварійний вміст- під терміном розуміється вміст нових тегів HTML5, таких як audio > , video > , canvas > , що відображається, якщо браузер користувача не підтримує зазначені теги.

Короткі підсумки

Ця лекція досить коротка. Ми спеціально не хотіли торкатися властивостей і методів, що дозволяють малювати на полотні. Це буде тема наступної лекції.

Головне, що потрібно розуміти, коли ви говорите про canvas > це те, що власне зображення генерується за клієнта, з допомогою веб – сценаріїв. При цьому немає необхідності в наявності будь-яких додаткових модулів плагінів та іншого. У всякому разі, так має бути, і цього HTML5, як стандарт, прагне. Зараз використовувати canvas > необхідно з обережністю, обов'язково передбачаючи наявність аварійного вмісту.