Выпуск №6 (Июнь) / Выпуски журнала за 2016 год / Публикации журналов Издательского дома "Интернаука" / Internauka

З виходом нового стандарту мови розмітки гіпертексту HTML5 з’явився тег Canvas, який допомагає у відрисовці растрової графіки. За допомогою цього тегу з’являються нові можливості для мультимдіа.

Canvаs (холст) — елемент HTML5 для створення растрового двомірного зображення. Зазвичай використовується спільно з javascript. Використовується в основному для відображення графіків і гральних елементів в браузерних іграх, вставки відео, створення повноцінного плеєра. Canvas також використовується в WebGL для апаратного прискорення 3D-графіки. В результаті можна створювати навіть 3D ігри, які працюють у вікні браузера.

Canvas може ускладнити завдання роботам по розпізнаванню Капчі. При використанні canvas з сервера завантажується не картинка, а набір точок (або алгоритм промальовування), за якими браузер промальовує картинку (капчу).

Сanvas дозволяє розмістити на полотні: зображення, відео, текст. Залити все це суцільним кольором, або обвести контури чи навіть додати градієнт. Додавання тіней схожих на властивості css3 box-shadow і text-shadow. І, нарешті, побудова фігур за допомогою вказівки контрольних точок. Причому можна змінювати ширину ліній, так і кисть малювання ліній, стиль з'єднань ліній.

Переваги:

• На відміну від SVG набагато зручніше мати справу з великою кількістю елементів;

• Має апаратне прискорення;

• Можна маніпулювати кожним пікселем;

• Можна застосовувати фільтри обробки зображень;

• Є багато бібліотек.

Недоліки:

• Навантажує процесор і оперативну пам'ять;

• Через обмеження збирача сміття, немає можливості очистити пам'ять;

• Необхідно самому обробляти події з об'єктами;

• Погана продуктивність при великому розширенні;

• Доводиться вимальовувати окремо кожен елемент.

Для показання доцільності використовування canvas порівняємо його з найвідомішим аналогом на ринку, позиції якого досить високі - Flash.

Порiвнювати ми будемо за декiлькома критерiями:

• Пiдтримка сучасними браузерами

• Файловий розподiл та структура

• Мобiльнi пристрої

• Iгри

Рисунок 1. Flash vs HTML5

Пiдтримка сучасними браузерами.

На даний момент, 99% десктопних браузерiв пiдтримують Flash Player, та 82% пiдтримують HTML 5 Canvas. Але за даними, наведеними на Рис.2 бачимо, що бiльшiсть використовує новiтнi версiї браузерiв для настiльного комп’ютера, тож можемо вважати нiчию у цьому пунктi [2].

Рисунок 2. Розподiл користування браузерами для ПК за останнiй рiк [3].

Файловий розподiл та структура.

Для Flash технологiї буде достатнiм один файл з розширенням swf. Це дуже важливо для iгр i зручно для зберiгання чи транспортування. Що стосується HTML5, то тут за самою природою HTML вiдбувається роздiлення коду у рiзнi файли. Тому треба бути обачним з їхнiм розташуванням та вказанням вiрного шляху до них. Хоча, з iншого боку, кожен окремий файл виконує свою функцiю, i при редагуваннi частини коду є можливiсть ввести поправки, не хвилюючись за весь проект в цiлому. Також сама структура нового стандарту дозволяє пошуковим системам заглядати всередину створених з його допомогою сайтiв i додаткiв, чого не можна сказати про Flash. За допомогою HTML5 розробники можуть створювати проекти, що складаються з безлiчi взаємозалежних частин, i тепер пошуковi роботи вмiють розумiти цi зв’язки. А проект на Flash для роботiв Google представляє з себе незрозумiлий для них вмiст. Тому у даному пунктi невелику перемогу здобув HTML5.

Мобiльнi пристрої.

Змоменту релiзу HTML5 однiєю з головних переваг нової мови вважається її здатнiсть працювати на мобiльних пристроях. Той факт, що багато Android i iOS-пристроїв не пiдтримують Flash (97% мобiльних браузерiв пiдтримують HTML5 Canvas, а у Flash цей показник 0%), дозволяє використовувати його тiльки на PC - цей ринок в 2013 роцi впав на 10 вiдсоткiв у порiвняннi з 2012 [1]. За iнформацiєю Бюро iнтерактивної реклами, практично кожен другий житель США є власником мобiльного телефону з доступом в iнтернет, i кожен п’ятий перегляд веб-сторiнок вiдбувається з мобiльного пристрою. Цифри зростають щомiсяця, i компанiї, що створюють iнтерактивнi вiдео з використанням технологiї Flash, автоматично втрачають величезну аудиторiю, яка могла б переглядати цей контент на своїх смартфонах i планшетах [2]. У даному пунктi перемогу здобув HTML5.

Iгри.

За iнформацiєю блога Digital Buzz, 32% часу, витраченого користувачами мобiльних пристроїв, йде на iгри. За допомогою HTML5 розробники зможуть створювати iграшки, якi будуть працювати на всiх девайсах. Згiдно зi звiтом розробника open-source фреймворкiв для створення веб-додаткiв Sencha, понад 60% розробникiв повнiстю або частково перевели свої проекти на HTML5, i бiльше 70% з них заявили про те, що в цьому роцi користуються даною технологiєю бiльше i частiше нiж в минулому [1]. Тож в данному пунктi також перемагає HTML5.

Таблиця 1. Порівняння векторної та растрової графіки у різних браузерах

Браузер	Вектор,HTML5 (fps)	Вектор, Flash (fps)	Растр,HTML5 (fps)	Растр, Flash (fps)
Chrome 14.0.835.186	9	18	37	14
Firefox 6.0.2	11	17	48	14
IE 9.02	10	20	47	16
Opera 11.51	16	19	9	15
Safari 5.1	2	19	12	15

Так як для роботи з растровою графікою HTML5 підключає тег Canvas, то за даними у таблиці 1 бачимо, що він працює продуктивніше, аніж Flash.

Отже, виходячи з результатiв аналiзу HTML5 є кращим вибором, якщо дивитись наперед. Бо творцi контенту, якi не використовують у своїй роботi HTML5 вже вiдстають вiд тих, хто це роблять, i скоро остаточно програють. Тi, хто все ще вважають Flash вiдмiнним вибором для онлайн-вiдео та iгор, в найближчому майбутньому повиннi будуть змiнити свою думку, i до цього їх пiдштовхне все триваюче проникнення мобiльних пристроїв i подальше поширення HTML5.

Висновки

Були досліджені основні аналоги, які на сьогоднішній день представлені на ринку, виділені їх основні переваги та недоліки. Оскільки жодна з існуючих систем не орієнтована на врахування індивідуальних побажань користувачів при виборі пристрою для перегляду графіки та мультимедіа, то було доведено доцільність використання саме нового стандарту HTML. HTML5-тег Canvas грає центральну роль при створенні додатків на базі браузерів. Він надає практичну середу малювання, що базується на технології JavaScript і обмежену лише уявою розробника. Це середовище не дуже складне для освоєння. Крім того, в Інтернеті є безліч інструментів підтримки, що полегшують навчання і підготовку, включаючи інструкції щодо використання, блоги, онлайн статті, відео-та текстові посібники, типові програми. Зміст і головна функція canvas полягають в тому, що його вміст можна динамічно оновлювати, відрисовуючи нові елементи у відповідь на дії користувача. Ця його здатність реагувати на події, ініційовані відвідувачем сторінки, робить можливим створення таких інструментів і ігор, які раніше вимагали б застосування сторонніх технологій, таких як Флеш.

Можливість змінювати тексти та зображення в візуальному режимі і імітувати рух робить Canvas виключно цінним інструментом. В будь-якому випадку Canvas є найважливішим компонентом можливостей, що надаються специфікацією HTML5.

Література:

RIP Flash: Why HTML5 will finally take over video and the Web this year, Режим доступу: http://thenextweb.com/dd/2014/04/19/rip-flash-html5-will-take-video-web-year/ Дата доступу – 5.05.2016
1.Flash vs HTML5, Режим доступу: http://flashvhtml.com/ Дата доступу – 5.05.2016
Top 12 browser versions from 2015 to 2016 Режим доступу: http://gs.statcounter.com/#desktop-browser_version-ww-monthly-201502-201602-bar Дата доступу – 5.05.2016

CANVAS – НОВАЯ СТРАНИЦА В ИСТОРИИ МУЛЬТИМЕДИА