19582

РОЗРОБКА HTML5 ДОДАТКУ ДЛЯ ВІЗУАЛІЗАЦІЇ ТА МАНІПУЛЯЦІЇ СІТКАМИ ЕЛЕМЕНТІВ

Дипломная

Информатика, кибернетика и программирование

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

Украинкский

2014-11-30

991 KB

9 чел.

ДЕРЖАВНИЙ ВИЩИЙ НАВЧАЛЬНИЙ ЗАКЛАД

«ЗАПОРІЗЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ»

МІНІСТЕРСТВА ОСВІТИ І НАУКИ УКРАЇНИ

МАТЕМАТИЧНИЙ ФАКУЛЬТЕТ

КАФЕДРА МАТЕМАТИЧНОГО МОДЕЛЮВАННЯ

КВАЛІФІКАЦІЙНА РОБОТА БАКАЛАВРА

на тему: «РОЗРОБКА HTML5 ДОДАТКУ ДЛЯ   ВІЗУАЛІЗАЦІЇ ТА МАНІПУЛЯЦІЇ СІТКАМИ ЕЛЕМЕНТІВ»

Виконав:

студент

4

курсу,   групи

5130-1

напряму підготовки

6.040201 – математика

(шифр і назва напряму підготовки)

Є.А. Коваль

(ініціали та прізвище)

Керівник

доцент, к.ф.-м.н. Чопоров С.В.

(посада, вчене звання, науковий ступінь, прізвище та ініціали)

Рецензент

доцент, к.ф.-м.н. Курапов С.В.

(посада, вчене звання, науковий ступінь, прізвище та ініціали)

Запоріжжя – 2014

ЗМІСТ

[1] КВАЛІФІКАЦІЙНА РОБОТА БАКАЛАВРА

[2] ЗМІСТ

[3]
Вступ

[4] 1. SVG або Canvas

[4.0.1]  ВВЕДЕННЯ

[4.0.2] 1.2 ПІДСТАВА ДЛЯ РОЗРОБКИ

[4.0.3] 1.3 ВИМОГИ ДО ПРОГРАМИ АБО ПРОГРАМНОГО ВИРОБУ

[5] РОЗДІЛ №2

[6]                                           Введення

[7] РОЗДІЛ №3


Вступ


HTML еволюціонує , забезпечуючи поліпшену і складнішу стандартну графіком , що сприяє підвищенню якості взаємодії з користувачами . Це дає веб- розробникам можливість використовувати веб- технології на основі стандартів для створення інтерактивних сайтів і додатків зі складною графікою , не вдаючись до спеціалізованих технологіям , або написати код для конкретного браузера . У наступному розділі наведено основні поняття векторної графіки , а також :
• розглядаються відмінності між безпосереднім режимом і абстрактним режимом ;
• описується елемент Canvas HTML5 , використовуваний для графіки в безпосередньому режимі, і наводиться огляд технології Canvas ;
• вводиться поняття масштабованої векторної графіки ( SVG ) , описується набір елементів HTML5 , використовуваних для графіки абстрактного режиму і дається огляд SVG ;
• дані інструкції для нових і досвідчених розробників щодо застосування тієї чи іншої моделі векторної графіки (або обох залежно від сценарію) до векторної графіки і HTML5.

1. SVG або Canvas


У цьому розділі ми розглянемо порівняння SVG і Canvas ; наведемо порівняльні приклади коду , наприклад для побудови ходу променя і роботи з " зеленим екраном" .
Примітка Для перегляду багатьох прикладів даного розділу потрібно браузер ( такий як Windows Internet Explorer 9 ) , що підтримує елементи SVG і Canvas .


1.1 Векторна графіка


Векторна графіка не є новим поняттям . Для створення зображення у векторній графіці використовуються геометричні примітиви ( фігури , точки , лінії і багатокутники ) . Наприкінці шістдесятих в мову програмування Logo був доданий мова опису векторної графіки ( " черепашача графіка" ) для підтримки робота- черепахи , розробленого для виконання функцій малювання . З того часу складність графіки істотно зросла , проте основні поняття графіки залишилися колишніми.
За рівнем складності векторна графіка може бути простою , середньої складності і дуже складною. Нижче наведені приклади графіки різних рівнів складності.
Проста - виноска в документі або ілюстрації .
Середньої складності - ілюстрації ( наприклад , діаграми , схеми і карти).
Дуже складна - документи ( наприклад, використовувані при проектуванні ) .
Незважаючи на те що наведені приклади статичні , векторна графіка підтримує інтерактивність. Інтерактивність є ключовою функцією, що дозволяє істотно розширити можливості в цих сценаріях . Векторна графіка забезпечує інтерактивні і статичні формати для веб -додатків , додатків для настільних систем і пристроїв.

1.2 Короткий огляд сценаріїв векторної графіки

В Інтернеті :
- Використання векторної графіки в фонових зображеннях на веб- сторінках для підтримки великої кількості точок на дюйм і функцій масштабування зі стисненням .
- Властивості зіставлення ( такі як Карти Bing) для пошуку маршрутів.
- Інтерактивні біржові сайти , що відображають діаграми і графіки в режимі реального часу.
- Карти для виборчих пунктів та інші карти .
- Схеми розсадки для авіакомпаній або концертних залів.
- Ігри .


У додатках набору Office :
- Засоби для ефективної роботи , наприклад Microsoft Office Word

( картинки) , PowerPoint і Excel , а також фігури для Visio.
- Засоби автоматизованого проектування , що використовують для виведення результатів формати векторної графіки.
- Корпоративні інструменти , наприклад додатки Oracle і Microsoft Dynamics , обробні інтерактивні діаграми і графіки.


У пристроях :
- Розширені компоненти графічних користувацьких інтерфейсів.
- Інтерактивні міні -додатки та значки.
- Інтерфейс користувача кишенькових персональних комп'ютерів.


Професійні програми для дизайнерів
Професійні веб- дизайнери використовують наступний набір інструментів для перегляду векторної графіки:
- Adobe Illustrator , використовуваний для створення високоякісних статичних зображень , які можна експортувати у формат SVG ;
- Adobe Flash Professional , що дозволяє експортувати файли на векторному мовою на базі XML ;
- Microsoft Expression Blend для Windows Presentation Foundation ( WPF ) і Silverlight .
Важливо відзначити , що векторна графіка вже досить давно використовується в настільних комп'ютерах , пристроях і в Інтернеті.
Технології графіки HTML5
За допомогою HTML5 розробники або дизайнери можуть створювати описані вище особливості інтерфейсу за допомогою технологій , заснованих на стандартах. Це дозволяє істотно поліпшити взаємодію з користувачем , оскільки установка модулів не потрібно ( 50 % користувачів покидає сайти, що пропонують їх встановити) . В даний час за графіком, як правило , відповідає браузер . У разі використання Internet Explorer 9 застосовуються функції Microsoft Windows і графіка з апаратним прискоренням.
У наступному розділі описуються дві нові , але не схожі один на одного технології, наведено способи їх використання , а також переваги і недоліки кожної технології . Для полегшення вибору технології для окремого сценарію застосовується спектр сценаріїв векторної графіки.
На наступному малюнку показаний загальний спектр сценаріїв у векторній графіці. Будь-який сценарій може більше ставитися до Canvas або SVG. Це означає , що в конкретному сценарії одна технологія переважніше за іншу . Якщо сценарій потрапляє на середину спектра , можна вибрати будь-яку технологію.

За допомогою цих технологій можна створити практично будь-яку векторну графіку . Однак іноді (залежно від поставленого завдання ) для реалізації технології можуть знадобитися істотні системні ресурси або значні зусилля з боку розробника. Спектр сценаріїв буде розглянуто більш докладно далі в цьому розділі. Зокрема , будуть розглянуті випадки використання кожної технології та реалізація технологій в поширених сценаріях .


1.3 Введення в технології


У наступному розділі описані технології створення векторної графіки в HTML5 для підготовки до подальшого обговорення сценаріїв .
Використання прикладів
Наступний приклад коду можна використовувати як шаблон для інших прикладів . Цей шаблон можна використовувати для створення SVG в HTML. Даний шаблон використовується у всіх прикладах цього розділу. Завдяки формату можна використовувати сценарії і стилі. Шаблон також включає тег META , який спрощує розробку SVG в локальній загальної папці. У прикладах використовується наступний формат . Спочатку вказується значимий код , а потім дається посилання на повний код .HTML

<!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

   <meta http-equiv="X-UA-Compatible" content="IE=9"/>

   <style type="text/css" media="screen">

   </style>

   <script type="text/javascript">

   </script>

 </head>

 <body>

 </body>

</html>

SVG

Мова SVG використовується для опису масштабованої векторної графіки , яка представляє собою модель абстрактної графіки , вона зберігається в пам'яті моделі , якою можна керувати за допомогою результатів виконання коду при повторному рендеринге . Цей принцип роботи відрізняється від безпосереднього режиму , який обговорюється далі в цьому розділі. Обидва режими доступні в HTML5.
SVG - це модель, що працює в абстрактному режимі , яка була представлена ​​в 1999 р. у відповідь на дві пропозиції незалежних постачальників ( корпорації Майкрософт і компанії Adobe ) . Робоча група консорціуму W3C по SVG випустила в 2001 р. специфікацію SVG , яка носить рекомендаційний характер. Сьогодні ми працюємо з SVG 1.1 2nd Edition , яка на момент написання цього розділу перебувала на стадії " останнього дзвінка".
Хоча SVG може виступати у вигляді ізольованого файлу , увагу спочатку приділяється його природної інтеграції з HTML.
Як і у випадку з мовою HTML , для вбудовування SVG в документ використовуються елементи , атрибути та стилі . При першій появі елемента <svg> в документі він поводиться багато в чому подібно елементу <div> і є частиною класу HTMLDocument . Однак він містить додатковий інтерфейс SVGDocument , який забезпечує більш глибоке і складну взаємодію з об'єктами векторної графіки.

Елементи
Незважаючи на те що зовнішня програма-оболонка <svg> підходить для рамкової моделі HTML, внутрішня модель непридатна в більшості випадків, оскільки вектори не обмежуються простими полями. Ця незастосовність вимагає розширення атрибутів в SVG для забезпечення більш широких можливостей графіки.
Приклади :

<svg height="1000px" width="1000px"> 

 <rect id="myRect" height="100px" width="100px" fill="blue"/>

</svg>

Примітка. Для перегляду багатьох прикладів даного розділу потрібно браузер (такий як Windows Internet Explorer 9), що підтримує елементи SVG і Canvas.
Попередній HTML-код створює один квадрат з синім фоном, довжина і ширина якого дорівнює 100 пікселям.

Елемент <rect> підтримується в моделі DOM документа HTML. Для застосування стилів до елементів SVG , як і до інших елементів HTML , можна використовувати різні способи . У наступному прикладі показана таблиця .
стилі
Розробники можуть виявити, що атрибути їм вже знайомі. SVG має як звичайні атрибути , так і атрибути подання. На даному етапі це розмежування може здатися довільним , проте ключовим моментом є те , що до атрибутів подання можна застосовувати стилі відповідно з правилами використання стилів CSS.
Чотири прямокутника заливаються різними способами.

<!--No fill (defaults the color to #000000)-->

<rect id="myRect1" height="100%" width="100%" >

<!--using the class="greenrect"-->

<rect id="myRect2" height="100%" width="100%" class="greenrect"/>

<!--using the style="fill:pink"--> 

<rect id="myRect3" height="100%" width="100%" style="fill:pink"/> 

<!--using the attribute fill="red"--> 

<rect id="myRect4" height="100%" width="100%" fill="red"/>

Перший приклад показує , що відсутність атрибута кольору надає видимий ефект на графічний об'єкт. У цьому випадку в якості кольору за замовчуванням використовується чорний .
У другому прикладі для заливки прямокутника використовується клас class = " greenrect " . CSS для заливки квадрата :

rect.greenrect { fill : green ;}

У третьому прикладі для заливки квадрата рожевим кольором використовується вбудований стиль . В останньому прикладі для заливки квадрата червоним кольором використовується атрибут. Цей приклад також демонструє використання селекторів CSS. Стиль також включає наступне:

rect : hover { fill : yellow ;}

У цьому прикладі коду для всіх прямокутників встановлюється правило , згідно з яким при наведенні покажчика миші колір прямокутника стає жовтим .
Для досвідчених веб- розробників ніщо з наведеного вище не повинно бути новим. Наведені тут приклади покликані підкреслити подібності (використання стилів , таблиць стилів , класів і селекторів ) і відмінності (стилі застосовуються не до всіх атрибутів , а тільки до атрибутів уявлення , новим або несумісним властивостям ) .

Підтримка програмування


API атрибута та інші дії з моделлю DOM раніше застосовуються згідно поточним правилам атрибутів. Відмінність полягає в тому , що додаток для подання грунтується на атрибуті , який замінюється стилем , якщо це доречно.
Якщо ці атрибути задаються за допомогою основного атрибута або відповідних методів моделі DOM , то це впливає на представлення і модель DOM змінюється відповідним чином. Зверніть увагу на відмінності в синтаксисі при завданні висоти за допомогою моделі DOM SVG :

document.getElementById ( " myDiv " ) . style.height = " 200px " ;
/ / Alternatively
/ / document.getElementById ( " myDiv " ) . style = " height ; 200px " ;

document.getElementById ( " myRect " ) . height.baseVal.value = 200 ;
/ / Alternatively
/ / document.getElementById ( " myRect " ) . setAttribute ( " height " , " 200px " ) ;


Інтерактивність
Інша важлива відмінність SVG полягає в можливості створення взаємодії без ускладнення коду. Крім програмованої моделі DOM в SVG , як і в HTML , є модель подій . Подивіться на наступний малюнок , який є більш складним , ніж прямокутник або квадрат.
Для малювання фігур довільної форми використовується елемент path . У цьому прикладі дві фігури представляють Аляску і Гаваї в США .

Подія ініціюється, створюючи попередження, вказане раніше. Як і у випадку простого прямокутника, до цих складних фігурам також можна застосовувати селектори CSS. Простий механізм виділення можна задіяти за допомогою одного рядка CSS:

path:hover {fill:yellow;}

Canvas

Інший метод полягає в наданні користувачам багатою графіки за допомогою тега <canvas> , представленого в HTML5 компанією Apple для браузера Safari та інших графічних міні -додатків. Він надає розширене програмований взаємодія для малювання графіки , яке працює в миттєвому режимі , включаючи прямокутник , контур і зображення, аналогічні SVG. Відображення графіки, що працює в миттєвому режимі , є моделлю "зробив і забув" , яка відображає графічні об'єкти безпосередньо на екрані і , отже , не має зв'язку з попередніми діями . На відміну від абстрактного режиму в Canvas відображаються графічні об'єкти не зберігаються. Незалежно від фактичних змін розробнику потрібно повторно викликати всі команди малювання , необхідні для опису всієї сцени кожен раз , коли потрібно новий кадр .

Елемент
Для використання можливостей елемента canvas веб -розробнику необхідно представити цей елемент:

<canvas id="myCanvas" width="1200px" height="1200px"></canvas>

Після цього можна використовувати інтерфейси API <canvas>, які мають традиційні двомірні низькорівневі бібліотеки для малювання зображень або векторів.
Для маніпуляцій з графічними об'єктами в canvas використовується код JavaScript, який знайомий веб-розробникам і забезпечує підтримку графіки.

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

Як згадувалося раніше, в Canvas є фігури і об'єкти, аналогічні SVG. Для малювання прямокутника розробник може використовувати наступний код:

ctx.fillStyle = "rgb(0,0,255)";

ctx.fillRect(10, 10, 100, 100);

Переваги та недоліки цих методів і сценарії їх використання описуються далі в цій статті.
Кінцевий результат той же, що і при використанні SVG.

Як і SVG, Canvas має більш складні геометричні примітиви, що відрізняються тим, що вони представлені у вигляді функцій.

Програмування подій
Для малювання більш складних графічних об'єктів, наприклад карти штату Гаваї в попередньому прикладі, інтерфейс API canvas надає API елемента path, який підтримує команди, аналогічні командам елемента <path> в SVG, за винятком того, що API викликаються для кожного сегмента лінії замість виведення їх в одному атрибуті.

ctx.beginPath();

ctx.moveTo(233.08751,519.30948);

ctx.lineTo(235.02744,515.75293);

ctx.lineTo(237.29070000000002,515.42961);

ctx.lineTo(237.61402,516.23791);

ctx.lineTo(235.51242000000002,519.30948);

ctx.lineTo(233.08751,519.30948);

ctx.closePath();

API елемента path не обмежуються функціями moveTo і arc і включають квадратические криві і криві Безьє (як і в SVG ) .
Події та можливості визначення розташування покажчика миші на зображенні обмежені. Оскільки дані не зберігаються , програміст повинен перевести координату mouseX , mouseY в одному елементі тега <canvas> і потім перенаправити цю команду фігурі , що знаходиться в структурі пам'яті. Для більш складних елементів path існують бібліотеки сторонніх виробників, які підтримують цю можливість , у тому числі вбудований API isPointInPath , але його застосування обмежене останнім намальованим елементом path . Таким чином , на відміну від SVG , в Canvas немає ні стилю , ні підтримки визначення попадання покажчика миші на декількох геометричних фігурах. Оскільки canvas не підтримує масштабування , при збільшенні карти штату Гаваї якість зображення істотно погіршується:

Canvas - це повнофункціональний низькорівневий інтерфейс API, який дозволяє розробникам надавати нові можливості роботи з графікою.
Загальне порівняння технологій Canvas і SVG
Далі наведені характеристики Canvas і SVG, які допоможуть визначити, в яких випадках краще використовувати ту чи іншу технологію при створенні векторної графіки.

Canvas

SVG

На основі пікселів (динамічний. PNG)

На основі фігур

Один елемент HTML

Кілька графічних елементів, які входять до складу DOM

Змінюється тільки за допомогою сценарію

Змінюється за допомогою сценарію і CSS

Модель події / взаємодію з користувачем детальні (x, y)

Модель події / взаємодію з користувачем абстрактні (прямокутник, шлях)

Продуктивність поліпшується при зменшенні поверхні, збільшенні числа об'єктів (> 10 000) чи наявності обох умов

Продуктивність поліпшується при зменшенні числа об'єктів (<10 000), збільшенні поверхні або наявності обох умов

 

Подивіться на дані попередньої таблиці і подумайте про можливості цих технологій з точки зору існуючого програмного забезпечення. Технологія Canvas схожа на додаток Microsoft Paint , за допомогою якого можна малювати і створювати зображення , використовуючи фігури та інші засоби . Технологія SVG схожа на слайд Microsoft Office PowerPoint , який підтримує програмовану можливість додавання теми .


1.4 Сценарії використання <canvas> і SVG
У цьому розділі описуються переваги та обмеження обох технологій , а також наведені загальні принципи, що дозволяють зробити вибір на користь однієї з технологій . Слід зазначити , що як за допомогою SVG , так і за допомогою <canvas> можна домогтися практично однакових результатів з ідентичними функціональними можливостями. Важливо виділити особливі сценарії , в яких <canvas> надає значні переваги в порівнянні з SVG або навпаки , а також сценарії , в яких доцільніше використовувати обидві технології .

Ці сценарії допоможуть тим , хто віддає перевагу SVG або Canvas , а також тим , хто ще не визначився. У них описуються переваги і недоліки кожного підходу , так що розробники можуть зрозуміти поведінку кожної технології і вибрати відповідну для використання у своїх додатках.
невдалий вибір
Іноді зовнішні обставини вимагають вибрати технологію , що має незалежні (або майже незалежні ) функціональні можливості. При виборі між Canvas і SVG слід враховувати дві основні відмінності .
Іноді рівень знань розробника , його навички і наявні засоби відіграють вирішальну роль у виборі технології . Якщо розробник добре знайомий з API низкоуровневой графіки і має обмежені пізнання в області веб- технологій , рекомендується вибирати Canvas .
Також слід враховувати ступінь важливості продуктивності для сайтів з великим обсягом трафіку. Це необхідно для того , щоб порівняти характеристики продуктивності двох технологій . Можливо , буде потрібно розробка спеціальних можливостей , що настроюються стилів і більш детальне взаємодію з користувачами , що недоступно в Canvas . Це зовсім не означає , що технологія Сanvas , яку зазвичай вибирають для високопродуктивних середовищ , є очевидним варіантом. На наступних діаграмах показано різницю часу рендеринга для об'єктів SVG і Canvas
. 

У загальному випадку , у міру збільшення розміру екрану , продуктивність Canvas падає , оскільки потрібно обробити більше пікселів . У міру збільшення числа об'єктів на екрані продуктивність SVG падає , оскільки об'єкти поступово додаються в модель DOM . Ці показники не є точними і , безумовно , можуть змінюватися залежно від реалізації , платформи , використання повного апаратного прискорення графіки і швидкості роботи модуля JavaScript.


Високоякісні складні векторні документи
Високоякісні складні векторні документи підходили і будуть підходити для SVG з двох основних причин . Існує досить багато документів з високим ступенем деталізації , включаючи документи , створювані за допомогою програм автоматизованого проектування , для яких scalable частина SVG забезпечує докладне уявлення як ізольованих документів , так і документів , вбудованих в веб -сторінки. Ця технологія також підходить для високоякісного друку . Декларативний характер SVG дозволяє обробляти або створювати фігури з баз даних на стороні клієнта або сервера. Крім того , перехід у напрямку від рекомендаційного до обов'язкового характеру використання SVG підтримується на урядовому рівні через інженерних схем (патенти ) або промислових схем ( містобудівне проектування) . Ця тенденція буде продовжуватися , оскільки при виборі постачальників систем електронного документообігу органів державної влади віддають перевагу то одному постачальнику , то іншому . До цих документів відносяться наступні:
- Будівельні , інженерні та планувальні схеми
- Електричні , аеронавігаційні та схематичні креслення
- Організаційні діаграми
- Карти
- Біологічні діаграми
На наступних малюнках показано приклад деталізації , яку можна забезпечити в рамках попереднього сценарію . На першому з них показаний знімок веб -сторінки , яку можна знайти на тестовому сайті. Він містить схему дихальної системи і періодичну таблицю елементів .

На другому малюнку показана та ж схема, але збільшена в 10 разів.

Якщо оцінюється доцільність підтримки схем великого розміру і потрібна можливість розгляду найдрібніших деталей або друк схем цілком для виробничих цілей, цінність S при масштабованості стає більш ніж очевидна. З цих причин високоякісні складні векторні документи можна розташувати в самому кінці спектра поруч з SVG (див. рис. нижче).

Эти документы могут также выиграть за счет интерактивности, которая является вторым аспектом SVG и делает эти сценарии наиболее подходящими для моделей с абстрактным режимом графики.

Розширена веб- графіка
Використання SVG як формат зображення
Формат SVG також часто використовується в простих великих і невеликих зображеннях для додатків або веб- сторінок. Оскільки SVG завантажується в модель DOM або , як мінімум , розбирається перед створенням зображення , продуктивність трохи знижується. Однак це зниження є вкрай незначним в порівнянні з витратами на отрисовку веб -сторінки ( приблизно кілька мілісекунд) .
Для оцінки мережевого трафіку поговоримо про розміри файлів. Наступні два зображення ідентичні за зовнішнім виглядом , і їх розміри відрізняються всього на 1 КБ , оскільки розмір SVG - файлу трохи більше, а сам файл не стиснутий.

                                                     

Як згадувалося раніше, формат SVG є масштабованим. Якщо розробник захоче збільшити масштаб цього зображення або якщо користувач вибере екран з високим дозволом, формат PNG стане пікселізовану або буде потрібно файл більшого розміру для збереження якості.

  

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

Робота з пікселями
Технологію Canvas , що розташовується на іншій стороні спектра , можна порівняти з швидким малюванням , що не вимагає зберігати дані про намальованих об'єктах. Існує ряд сценаріїв обробки даних реального часу , де краще всього використовувати теги <canvas> . Для імітації поверхні рідини на зображенні може застосовуватися трасування променів. При відстеженні шляху пучка світла використовуються пікселі в площині зображення і моделюються ефекти попадання променя на віртуальні об'єкти. Ця модель показана на наступному малюнку .

Тут потрібні складні обчислення, і швидкість розрахунку залежить від продуктивності модуля JavaScript в браузері. Хоча більшість буде небезпідставно стверджувати , що машинний код все ж швидше , у міру удосконалення модулів JavaScript стає ясно , що цей розрив скорочується як у часи ассемблирования і C + + .
Існує широкий діапазон ефектів , що досягаються за рахунок трасування променів , яка зазвичай виконується у фоновому режимі в Інтернеті. Можна створювати безліч різних візуальних ефектів , включаючи формування реалістичних зображень від простої векторної графіки до застосування фільтрів , що допомагають усувати ефект червоних очей ( як у фотоапаратах ) .
Оскільки інтерфейс API Canvas дозволяє розробникам зчитувати і записувати пікселі , єдині обмеження тут пов'язані з швидкістю і уявою. Попередній приклад надано Адамом бурмистер ( Adam Burmister ) . У цьому прикладі для підтримки обчислень , необхідних для створення кінцевого зображення , використовується велика кількість бібліотек , проте основною є функція
 fillRect.

setPixel: function(x, y, color){

 var pxW, pxH;

 pxW = this.options.pixelWidth;

 pxH = this.options.pixelHeight;

 this.canvas.fillStyle = color.toString();

 this.canvas.fillRect (x * pxW, y * pxH, pxW, pxH);

},

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

Врахуйте , що автор вищезгаданого трасувальника променів зауважив , що , оскільки сценарій призначений для отримання статичного зображення , програмне забезпечення для настільних систем набагато краще підходить для великого числа операцій з плаваючою комою , необхідних для трасувальника променів.
Цікавою реалізацією маніпуляцій з пікселями є застосування фільтрів до зображень . Незважаючи на те що фільтри вже існують в Інтернеті і вимагають значної швидкості обробки , яка підвищується за рахунок апаратного прискорення графіки на більш глибокому рівні графічного конвеєра , розробники можуть експериментувати з алгоритмами , такими як виявлення краю або іншими математичними виразами.
Дані, що надходять в режимі реального часу
Технологія Canvas ідеально підходить для виведення даних реального часу при використанні більш поширених сценаріїв . Як уже згадувалося , за допомогою Canvas важко реалізувати взаємодію з користувачем . Тому подумайте про те , як можна швидко розпізнати ці сценарії. Отже , подальша дискусія відноситься до візуалізації неінтерактивних даних в режимі реального часу.
В даний час можна зробити подання даних про погоду або виключно статичним методом шляхом створення зображень на сервері через певні проміжки часу, або набагато швидше на стороні клієнта за допомогою додаткових модулів сторонніх виробників. Незважаючи на те що дослідження, проведені ECWMF , вказують на економію коштів у результаті використання SVG в порівнянні з зображеннями , що генеруються на сервері , Canvas явно є вдалим вибором для більшості графічних уявлень погодних умов ( та інших даних , які швидко змінюються в режимі реального часу) . На наступному малюнку показані погодні умови , вказані на карті .

Як видно з попереднього зображення , велика поверхня малювання необов'язкова , а число об'єктів на екрані досить високе. За допомогою API Canvas вони можуть швидко виводитися на екран і стиратися , не надаючи впливу на модель DOM . І хоча це можна зробити , наприклад , з еліпсами SVG , завантаження елементів у модель DOM і подальша зміна за допомогою анімації дається великою ціною . Якщо ви бачите в зображеннях або анімації аналітичних даних велика кількість фігур , особливо різнорідних , як правило , це означає , що необхідно використовувати технологію Canvas . Тут реальними обмеженнями є візуалізація швидко змінюються даних і регулювання швидкості процесора і модуля JavaScript. Зауважте , що за винятком вимогливого до ресурсів процесора сценарію трасування променів нормальної анімації таки можна добитися. Поняття Reasonable описує відносну анімацію , яка залежить від можливої ​​швидкості застосування JavaScript клієнтом , а також швидкості обчислень і провідної передачі сервера.
Цей сценарій демонструє основне використання <canvas> .

Заміна пікселів (зелений екран)
Іншим потенційним сценарієм використання Canvas є визначення кольору у відео для заміни кольору фону другий сценою або зображенням . Як і у випадку трасування променів або фільтрів , через обмеження поточної швидкості обчислень в JavaScript будь-який реальний сценарій , що вимагає високої якості кінцевих результатів , ймовірно , буде попередньо оброблений з використанням програмного забезпечення для настільних систем. Однак оскільки тег <canvas> призначений для низькорівневого читання і запису пікселів , такі сценарії , як заміна пікселів (зелений екран) взагалі неможливо реалізувати за допомогою SVG.
Код , необхідний для читання пікселів з ​​двох відеофайлів і записи в іншій відеофайл , вимагає використання двох відеозаписів , двох файлів Canvas і остаточного файлу Сanvas . Виконується покадровий захоплення відеозапису і її отрисовка в двох окремих файлах Canvas . Це дозволяє зчитувати дані в зворотному напрямку.

ctxSource1.drawImage(video1, 0, 0, videoWidth, videoHeight);

ctxSource2.drawImage(video2, 0, 0, videoWidth, videoHeight);

Отже, наступний крок полягає в отриманні дескриптора кожного виведеного зображення, щоб можна було розглянути кожен окремий піксель.

currentFrameSource1 = ctxSource1.getImageData(0, 0, videoWidth, videoHeight);

currentFrameSource2 = ctxSource2.getImageData(0, 0, videoWidth, videoHeight);

Після отримання код перебирає масив пікселів зеленого екрану і виконує пошук зеленого кольору. У разі виявлення код замінює всі зелені пікселі пікселями зі сцени фону.

for (var i = 0; i < n; i++)

{

 // Grab the RBG for each pixel:

 r = currentFrameSource1.data[i * 4 + 0];

 g = currentFrameSource1.data[i * 4 + 1];

 b = currentFrameSource1.data[i * 4 + 2];

 

 // If this seems like a green pixel replace it:

 if ( (r >= 0 && r <= 59) && (g >= 74 && g <= 144) && (b >= 0 && b <= 56) ) // Target green is (24, 109, 21), so look around those values.

 {

   pixelIndex = i * 4;

   currentFrameSource1.data[pixelIndex] = currentFrameSource2.data[pixelIndex];

   currentFrameSource1.data[pixelIndex + 1] = currentFrameSource2.data[pixelIndex + 1];

   currentFrameSource1.data[pixelIndex + 2] = currentFrameSource2.data[pixelIndex + 2];

   currentFrameSource1.data[pixelIndex + 3] = currentFrameSource2.data[pixelIndex + 3];

 }

}

На завершення масив пікселів записується в кінцевий файл Canvas.

ctxDest.putImageData(currentFrameSource1, 0, 0);

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

Сценарії об'єднання або схрещування


Наступні сценарії можна реалізувати за допомогою технології SVG або Canvas з прийнятною якістю , але одну з них можна віддати перевагу іншій.

Діаграми і графіки
Існує широкий спектр діаграм і графіків , яким потрібна векторна графіка . Можливо , для створення більшості з цих графіків доцільно використовувати технологію SVG , тому що вони мають одну з наступних трьох характеристик :
- графіки генеруються на основі існуючих даних , які легко перевести у формат XML ( SVG ) ;
- вони вимагають взаємодії з користувачем ;
- їх можна зробити краще за рахунок стилів на веб -сторінці.
Доповнимо сценарії створення високоякісних документів інтерактивними функціональними можливостями , які суттєво розширюють область застосування сценаріїв . У їх число входять:
- інтерактивні організаційні діаграми і блок- схеми;
- діаграми даних (кільцеві , гістограми , діаграми розсіювання ) ;
- інтерактивні карти (пошук маршруту) ;
- будівельні , інженерні та планувальні схеми;
- схеми розсадження для авіакомпаній або концертних залів.
Як уже згадувалося раніше , для обробки швидко змінюються даних в режимі реального часу краще всього використовувати Canvas (в основному через швидкості).


1.5 Двомірні ігри
Під казуальними іграми тут маються на увазі прості двомірні ігри для Інтернету. Технологію (тобто Canvas або SVG ) вибирає розробник. Оскільки історично бібліотеки ігор використовували API низкоуровневой графіки , спостерігатиметься тенденція до зміщення в бік <canvas> .
Коли інші компоненти бібліотеки розташовуються значно глибше , ніж шар графіки ( наприклад , популярні фізичні модулі ) , графіка стає деталлю реалізації . Геометричні компоненти графіків , такі як кордони , швидкості , розміри і розташування передаються модулям , які згодом реагують , генеруючи значення швидкості , зіткнення та розташування. Графіка займає найвище становище в стек.
Концепцію графіки , не залежну від логіки гри можна побачити у двох іграх , розроблених одним і тим же автором , який хотів продемонструвати використання технологій <svg> і <canvas> : SVG - oids і canvas - pinball . Більш вдалий приклад незалежності рівня графіки від ігрового модуля можна побачити , порівнявши canvas - pinball з SVG - Dice , оскільки в обох випадках застосовується один і той же фізичний модуль .
Хоча логіка гри і демонстрації відрізняється , фізичний модуль в обох іграх стежить за позиціями , зіткненнями , швидкостями і іншими фізичними параметрами компонентів гри.
Що стосується canvas - pinball , тут настроюється диспетчер анімації верхнього рівня перемальовує сцену за допомогою послідовності API Canvas.

if (animationsInProgress) {

 ctx.save();

 ctx.lineWidth = 2.0;

 ctx.beginPath();

 ctx.moveTo(89, 322);

 ctx.lineTo(101, 295);

   .

   .

   .

 ctx.stroke();

 ctx.restore();

 ctx.moveTo(tVp.x, tVp.y);

}

Якщо мова йде про гру SVG Dice, то настроюється диспетчер анімації верхнього рівня використовує перетворення в групах для переміщення існуючої графіки на екрані за допомогою DOM.

if (animationsInProgress)

{

 this.rotation += (this.circleBody.m_linearVelocity.x/20);

 var transFormString = "translate(" +

   Math.round(this.circleBody.m_position.x) + "," +

   Math.round(this.circleBody.m_position.y) + ") scale (" +

   this.scale.toString() + ") rotate(" +

   Math.round(this.rotation).toString() + "," +

   Math.round(this.xTrans).toString() + "," +

   Math.round(this.yTrans).toString() + ")";

   this.die2.setAttribute("transform", transFormString);

}

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


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


Проектування користувальницького інтерфейсу
Кілька років тому вважалося , що для проектування користувальницького інтерфейсу необхідно використовувати технологію SVG. Вимоги відповідають SVG. Насправді , принаймні один інтерфейс операційної системи Linux створений повністю на базі SVG. Елементи управління зі стандартного внутрішнього набору , такі як повзунки , прапорці , кнопки з округленими кутами і інші нестандартні компоненти , досить просто реалізувати за допомогою векторної графіки. Однак , завдяки недавнім і майбутнім нововведенням в CSS , включаючи закруглені кути , градієнти , фільтри і події - покажчики , переважна більшість цих елементів управління можуть бути розроблені за допомогою стандартних конструкцій HTML для документів з рамкової моделі . Інші елементи керування (особливо після недавнього появи моделей " сітка CSS" і " адаптується блок CSS" ) скоріше орієнтовані на елементи HTML , принаймні , застосовуються як контейнерів.
Тут наведено приклад складної , керованої даними діаграми . Незважаючи на те що вихідні дані спроектовано не дуже вдало , кінцевий результат представлений добре. Загальновідомо , що елементи управління графіками та діаграмами складно розробляти , проте сторонні виробники , як і корпорація Майкрософт , дуже процвітали в цьому. Це знижує навантаження на розробників , надаючи абстракції для прив'язки даних на стороні клієнта або на стороні сервера , але на сьогоднішній день для Інтернету рендеринг на стороні клієнта ще досить статичний або вимагає установки додаткових модулів . У прикладі нижче розширене взаємодія з користувачем забезпечувалося за рахунок багатих можливостей SVG. Незалежно від того коду , який буде наданий клієнтові ( в майбутньому можливо більш декларативне взаємодія) , діаграма відображається за допомогою двох ключових компонентів. Оточення і дані Оточення або фон діаграми є базовою статичної SVG :

<rect id="tipsh" x="20" y="100" width="194" height="34" rx="5" ry="5" />

<rect id="tip" x="20" y="100" width="190" height="30" rx="5" ry="5" />

<text id="tiptxt" x="40" y="120" font-size="12" font-family="Arial" fill="#ffffff" visibility="hidden">milliseconds</text>

<polygon id="arrow" points="10,110 20,105 20,115" style="fill:#ffffff" />

<line x1="3" x2="460" y1="359" y2="359" style="stroke:#cccccc;stroke-width:1"/>

Далі кожна окрема точка даних або доставляється клієнту і динамічно обробляється, або формується на сервері:

<text x="10" y="348" font-size="12" font-family="Arial">{Page}.svg</text>

<rect x="115" y="350" width="86" height="8" style="fill:url(#inverseblue);filter:url(#Gaussian_Blur);" rx="12" ry="12"/>

<rect x="115" y="333" width="86" height="17" rx="12" ry="12" onmouseover="changeColor(evt)" onmousemove="changeText(evt,'2 milliseconds')" onmouseout="changeTextNotOver(evt)" />

<text x="171" y="345" font-size="11" font-family="Arial" fill="#ffffff">6.1%</text>

ТЕХНІЧНЕ ЗАВДАННЯ

  1.   ВВЕДЕННЯ

Це  технічне завдання поширюється на розробку HTML5 додатку, для візуалізації та маніпуляції сітками елементів.

1.2 ПІДСТАВА ДЛЯ РОЗРОБКИ

HTML5 додаток розробляється на підставі здачі диплома відповідно до плану  учбового процесу на 2013-2014 навчальний рік.

1.3 ВИМОГИ ДО ПРОГРАМИ АБО ПРОГРАМНОГО ВИРОБУ

Вимоги  до  функціональних  характеристик:

1. Система повинна забезпечувати можливість виконання наступних функцій:

  •  Можливість маніпулювати елементами;
  •  Виведення координат на екран;
  •  Можливість очищення вікна canvas.

2. Для цих завдань мають бути реалізовані:

  •  Алгоритм, зчитування координат з файлу;
  •  Iмпорт і експорт сіток;
  •  Система авторизації Yii;
  •  Сторінка для додавання сіток на сайт;
  •  Сторінка управління доступними сітками.

3. Вимоги до інформаційної і програмної сумісності:

HTML5 додаток повинен працювати в усіх, нових, веб-браузерах.


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

РОЗДІЛ №2

                                          Введення

HTML5 Canvas

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

Найпомітніші HTML5 можливості - це поява таких тегів як aside , footer , header , nav і article і повна підтримка новітніх типів полів введення у формах , включаючи атрибут placeholder ( підказує підказку в поле вводу) , phone і email ( які забезпечують правильну валідацію ) , а також ряд новітніх медіа- елементів , які включають audio , video і canvas , що дозволяє динамічно змінювати або малювати контент.стреміться зробити інтернет- сайти боле семантично правильними , більш інтерактивними , більш швидкими . Новий HTML стандарт включає функції , які раніше вимагали Flash або Javascript , а це означає , що сайти стануть менш залежні і зможуть працювати на багатьох платформах.

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

Відмінності HTML5 від попередніх версій. Порівняльний аналіз плюсів і мінусів.

2.1 Переваги HTML5

1. Підвищена безпека

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

У HTML5 , щоб уникнути подібної ситуації для тегів iframe була спроектована технологія Sandbox . Завдяки їй , всі скрипти , що запускаються через iframe працюватимуть в спеціально обмеженою віртуальному середовищі , яка не випустить результати їх роботи за межі браузера , а значить і не зможе вразити призначену для користувача операційну систему. Навіть якщо припустити , що запуск вірусу допомогою цього тега все ж відбудеться , будь-які серйозні наслідки він понести вже не зможе.

2. Введення даних

У HTML5 стає простіше і безпечніше. Правильність введення даних контролюється в режимі реального часу безпосередньо під час введення . У HTML4.0 перевірка помилок і повідомлення про них відбувається вже після відправки документа , що може створювати проблеми користувачам .

Підтримка повноцінної графіки

До недавнього часу безперечним лідером анімованої графіки для браузерів була технологія Flash. З появою в новому HTML5 стандарті такого інструменту як canvas позиції Flash -графіки будуть , ймовірно , сильно потіснені .

Суть такого потужного нововведення як canvas полягає в тому , що для браузерів на екрані виділяється спеціальний простір , положення якого на веб- сторінці визначається розробником сайту. У цій області за допомогою цілого набору спеціальних графічних HTML5 команд можна складати графічні зображення , в тому числі і анімовані , практично будь-якої складності . Більше того , для 3 -D графіки розробляється спеціальний набір команд аналогічних всесвітньо відомого стандарту тривимірної графіки OpenGL . Тепер браузер буде здатний відтворювати не тільки красиві двомірні інтерактивні додатки , а й повноцінні тривимірні ігри .

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

3. Відео та аудіо

Для того щоб відтворити відео або аудіо потік в браузері користувачеві доводиться вдаватися до допомоги все тієї ж Flash технології , необхідні в HTML4.0 .

Браузерам для цього доводитися постійно користуватися Flash програвачами , а також завантажувати постійні оновлення від Adobe для цієї технології , без яких користувачі сильно ризикують заразити свої комп'ютери вірусами через проломи в старих версіях Flash.прізван нарешті позбавити браузери від цих додаткових програм і дати їм можливість повноцінного відтворення аудіо та відео контенту своїми силами. Для цього в HTML5 коді передбачені спеціальні теги , такі як <video> і <audio> . Втім , у цього нововведення є і свої недоліки , наприклад відсутність єдиного стандарту для відеокодеків , що не сприяє поки широкому поширенню цієї зручною для користувача і веб- розробників технології .

4. Багаторазове збільшення швидкості роботи

Складно уявити сучасні веб- сайти без великого числа інтерактивних форм , відео та аудіо вставок , анімованих графічних елементів і різного роду оживляючих веб- сайт програм - скриптів. Звичайно , потужності сучасних обчислювальних машин цілком вистачає , щоб обробляти таку величезну кількість елементів веб -сторінки , але Інтернет технології не стоять на місці , і чим більше буде розвиватися візуалізація , інтерактивність і якість медіа -інформації , тим вище будуть вимоги до «заліза » користувача .

Звичайно ж , проектувальники HTML5 не могли обійти цю проблему стороною. Новий стандарт забезпечує підтримку багатопоточності , яку іменували як Web Works . Таким чином , сучасні багатоядерні системи отримують можливість паралельно виконувати обробку скриптів і тим самим збільшити швидкість роботи сайту на кілька порядків залежно від його конструкції і складності.

5. Технологія Web Storage

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

Технологія Web Storage для HTML5 затьмарить cookies своїми можливостями тільки тому , що представляє з себе не форматно обмежений текстовий файл , а спеціально орієнтовану базу даних для різних видів інформації. Тепер в такій базі сайт може зберігати не тільки окремі настройки сайту , а цілі фрагменти його коду , що дозволить працювати з веб -додатками навіть за відсутності підключення до мережі Інтернет.

6. Структурні можливості HTML5

Роблять структуру веб- документа простіший , а код чистіше. Нові семантичні елементи header , nav , section , article , aside і footer можуть використовуватися замість контейнерів div , що застосовуються зараз в HTML4.0 . нові елементи дозволяють більш конкретно описувати заголовок , нижній колонтитул , колонки тексту та інші. Ці нововведення можуть використовуватися для автоматичної генерації змісту та організації більш ефективної і простий навігації по веб -сторінці. Код при цьому стає чистішим і менш засміченим другорядними деталями.

Кілька конкретних прикладів:

Приклад 1. Замість громіздкої записи HTML4 :

<! DOCTYPE html PUBLIC _ / / DTD XHTML1.0 Transitional / / EN

< # " justify " > 7 ) Переваги для кінцевого користувача

З HTML5 життя кінцевого користувача стає помітно легше :

Не потрібно установка численних додаткових програм;

HTML5 , на відміну від HTML4 сумісний , крім ПК і ноутбуків , ще й з планшетами , смартфонами і сучасними моделями телевізорів , які надають доступ в інтернет.

2.2 Недоліки HTML5

На сьогоднішній день в HTML5 присутні мінуси , через які він програє колишнім технологіями. Має місце деяка вразливість HTML5 в області захисту даних. Таку вразливість створює більший , в порівнянні з cookie стандарту HTML4 , обсяг даних , які зберігаються на жорсткому диску користувача . Небезпека полягає в тому , що у великих обсягах даних може міститися більше докладна інформація про користувача. Експерти висловлюють думку , сто якщо сховище HTML5 залишається на комп'ютері користувача протягом багатьох місяців , то інтернет- сайти , звертаючись до нього через JavaScript після завантаження сторінки , можуть непомітно для користувача збирати і передавати дані власнику сайту.

Відносно мультимедійного контенту теж є недоліки , що не дозволяють зробити остаточний вибір на користь HTML5. Як наголошується в офіційному блозі YouTube , підтримка відео HTML5 дозволяє відтворювати мультимедійний контент на комп'ютерах і пристроях , які не підтримують Flash Player , проте повною мірою HTML5 всім цим потребам все ще не відповідає. На сьогоднішній день Adobe Flash забезпечує найкращу платформу для відтворення відео. У HTML5 поки немає, наприклад , повноекранного режиму. Є недоліки , що стосуються використання HTML5 для створення ігор . І, крім того , новий стандарт поки що не підтримується всіма браузерами.

Різниця в форматах HTML5 відео / аудіо в різних браузерах може привести :

1) До збільшення часу тестування і розробки ;

2) До збільшення витрат дискового простору і навантаженні на сервер.

Також є й інші недоліки у використанні HTML5 відео / аудіо:

1) На даному етапі жоден їх кодеків не може підтримувати шифрування потоку з розпакуванням на клієнті , тобто не мають можливості віддавати контент в одну точку (теоретично його одночасно без шифрування зможе дивитися необмежену кількість клієнтів , а отже доведеться регулювати доступ до конкретного потоку на стороні сервера , що призведе до витрат потужностей ) ;

2) Немає жодного універсального рішення окрім як Flash для створення мітингів і онлайн- трансляцій прямо в браузері без установки додаткового ПЗ.

Недоліки HTML5 в розробці ігор :

· Повільна робота ігор, створених за допомогою HTML5 ;

· Не кожна платформа підтримує ігри , розроблені на HTML5 ;

· При розробці гри на HTML5 потрібно набагато більше ресурсів і часу;

· Відкритість коду HTML5 неприйнятна для безкоштовних ігор;

Відсутність потужних і зручних інструментів для створення ігор , особливо для анімації ;

Неможливість адекватно упаковувати гру в один файл для дистрибуції на різних порталах ;

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

Як зазначив Філіп Ле Егар ( Philippe Le Hegaret ) , керівник напрямку компанії W3C , яка розробляє стандарт HTML5 , в найближчі роки не вийти відмовитися від технології Flash. Причиною цьому він назвав те , що буде потрібен тривалий час для переходу всіх веб -клієнтів до підтримки HTML5. Протягом найближчого часу технології HTML5 і Adobe Flash будуть існувати.

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

Елемент <canvas> є частиною специфікації WhatWG Web applications 1.0, що відома як HTML 5.

<canvas> вперше було втілено Apple в Mac OS X Dashboard Safari. У Gecko підтримка canvas з'явилася в версії 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 ('2 d ');


Першим рядком ми отримуємо DOM-вузол нашого canvas, використовуючи метод getElementById. А отримати доступ до контексту малювання ми можемо методом getContext.

У HTML5 визначений елемент <canvas> як «растрове полотно, який може бути використаний для відображення діаграм, ігрової графіки або зображень на льоту». Полотно це прямокутна область на вашій сторінці, де за допомогою JavaScript можна малювати що побажаєте.

Як же це полотно виглядає? Насправді, ніяк. У тега <canvas> немає власного контенту та рамки.

Код виглядає так.

<canvas width="150" height="300"> </ canvas>

height - Задає висоту полотна. За замовчуванням 300 пікселів.
width - Задає ширину полотна. За замовчуванням 150 пікселів.

Давайте додамо пунктирну рамку, щоб побачити, з чим ми маємо справу.

                      Полотно з рамкою

У вас може бути декілька елементів <canvas> на одній сторінці. Кожене полотно буде відображатися в DOM і зберігати свій власний стан. Якщо ви додасте кожному полотну атрибут id, то можете отримати до них доступ, як і до будь-якого іншого елементу.

Розширимо наш код, включивши атрибут id.

<canvas id="a" width="300" height="225"> </ canvas>

Тепер легко можна виявити елемент <canvas> в DOM.

var a_canvas = document.getElementById ("a");

Подія onclick викликає цю функцію:

function draw_b () {

   var b_canvas = document.getElementById ("b");

   var b_context = b_canvas.getContext ("2d");

   b_context.fillRect (50, 25, 150, 100);

}

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

function draw_b () {

   var b_canvas = document.getElementById ("b");

   var b_context = b_canvas.getContext ("2d");

   b_context.fillRect (50, 25, 150, 100);

}

Кожне полотно має контекст малювання. Як тільки ви знайшли елемент <canvas> в DOM (за допомогою document.getElementById () або будь-яким іншим засобом), викликаєте метод getContext (). Необхідно зазначити рядок "2D" в методі getContext ().

Отже , у вас є елемент <canvas> і є контекст малювання , де визначені методи і властивості малювання . Мається ціла група властивостей і методів присвячених малювання прямокутників.

Властивість fillStyle може бути кольором , малюнком або градієнтом (докладніше про градієнтах трохи нижче). За замовчуванням fillStyle заливає суцільним чорним кольором , але ви можете встановити будь-що. Кожен контекст малюнка пам'ятає свої власні властивості при відкритті сторінки , поки ви її не поновіть .

fillRect ( x , y , width , height ) малює прямокутник , заповнений поточним стилем заливки.

Властивість strokeStyle як і fillStyle може бути кольором , малюнком або градієнтом .

strokeRect ( x , y , width , height ) малює прямокутник з поточним стилем лінії. strokeRect не заливати всередині , він просто малює кордону.

clearRect ( x , y , width , height ) видаляє пікселі у вказаному прямокутнику.

HTML5 - безсумнівний тренд. Причому, не стільки нова специфікація з новими тегами , скільки гармонійне і могутнє поєднання HTML + CSS + JS , витончено втирає носа Flash.

Вже зараз можна спостерігати красиві HTML - 5 сайти без мегабайтів зображень і без сотень кілобайт скриптів. Canvas дозволяє малювати в спеціальному елементі документа <canvas> лінії , дуги , прямокутники, кола , заливати простір , маніпулювати текстом і картинками. Все це прекрасно описано в « Canvas Tutorial « Mozilla Developers Center з прикладами та рисунками.

Цей тег незвичайний тим , що не керує параметрами візуалізації тексту , як , наприклад , "це слово буде виділено курсивом " , а дає можливість намалювати на сторінці будь-яке зображення використовуючи команди javascript .

Фактично до появи canvas якщо вам було необхідно розмістити на сайті динамічне зображення , наприклад , графік відвідувань сайту по днях тижня. То ви або створювали php - скрипт ( благо , навіть на безкоштовних хостингах давно є підтримка бібліотеки gd2 графічних функцій , таких як лінія , прямокутник , еліпс та інші). Або ви створювали flash - ролик , який також за допомогою своїх функцій малював зображення .

В окремих випадках можливе було використовувати кошти java applet або activex . Чим погані три останні підходу : flash як і java applet вимагає встановленого плагіна (і в разі java applet дуже немаленького розміру) , activex - працюють тільки під iexplorer і тільки під windows (не кажучи про те , що у багатьох користувачів ця дірява і , прямо скажімо , небезпечна технологія просто відключена). І ще , наприклад, у мене на роботі корпоративний proxy -сервер вирізає з сторінок flash - ролики , звичайно , це не показник , але все ж.

Підхід номер один , коли картинку генерує php код - універсальний, і надійний, правда споживає занадто багато надлишкової трафіку для деяких завдань. Наприклад , якщо ви створюєте додаток, який малює графік функції z = f ( x , y ) , то більша частина отриманого зображення буде залита одним кольором фону і лише невелика частина картинки буде відображати лінії графіка функції . Для експерименту я створив картинку розміром 1024 * 768 з намальованою лінією синусоїди. Її розміри в різних форматах були такі: gif - 8 кб , jpeg - 33 кб , png - зашкалив за 210 кб . Останнє зауваження : наше додаток буде набагато зручніше , якщо користувач зможе отримувати графіки функцій без підключення до Інтернету , що у разі dial - up або погодинної оплати саме те.

Будемо вважати , що я вас переконав у корисності підходу з перенесенням генерації зображення з сервера на сторону клієнта , а тепер пару слів про історію та поточної ситуації з html canvas .

Тег canvas не входив ні в один зі стандартів , його придумала і реалізувала у своєму браузері safari компанія apple . Ідею підхопила група розробників mozilla і додала підтримку тега canvas в движок html -візуалізації gecko використовуваного в firefox і суміжних продуктах.

Потім інновацію підтримала компанія Opera Software , і , починаючи з 9- ої версії , браузер opera також знає тег canvas . Самі " активні" розробники самого " ​​передового " ​​браузера (я говорю про iexplorer ) в цей час як завжди спали. На щастя novell і google почали проекти з реалізації плагіна підтримує canvas для iexplorer - а . Додалася чи підтримка canvas в новомодному 7-ий iexplorer я не знаю, тому ніде згадок в internet про це я не знайшов , а спробувати не можу через небажання викачувати сей монструозний продукт. Слід зазначити , що даний тег планують внести в перспективний п'ятий стандарт html .

Найпростіший приклад використання canvas це просто вставити його в тіло html документа , не забувши про fallback . Простіше кажучи , якщо браузер клієнта не підтримує даний тег , то він повинен побачити деякий поясняющее повідомлення . У прикладі нижче це розміщене всередині тега canvas зображення . Дуже важливо дати canvas -у ідентифікатор для цього служить атрибут id , якщо ви так не зробите , то не зможете з javascript звертатися до canvas і малювати на ньому. В якості стильового оформлення я задав області canvas кордон чорного кольору , це тільки для зручності подальшої роботи.

<html> <head>

<script> <! - саме тут розміщуватимуться функції , які малюють на canvas ->

</ script >

</ head > <body>

<canvas id="canva" width="400" height="400" style="border: 1px solid black;">

<img src="no_canvas_sorry.jpg" />

</ canvas >

<button onclick="draw()"> draw ! </ button > <! - ця кнопка викликає деяку функцію малювання ->

</ body > </ html >

Наступний крок це створення функції , яка буде викликатися при натисканні на кнопку button . Функція повинна отримати доступ до об'єкта " canva " , для цього ми застосуємо стандартний метод getElementById ( "той самий ідентифікатор об'єкта , який ви , сподіваюся, не забули задати " ) .

Потім слід перевірити , що браузер вміє малювати , слід попросити його для canvas повернути так званий контекст малювання (простіше кажучи , місце , де малюють ) . І потім , озброївшись довідником функцій , можна починати безпосередньо малювати. Найпростіше це створити прямокутник , зафарбований деяким кольором , при цьому ви можете задати колір як звичний rgb , або ж rgba - буква a на кінці дає нам можливість задати alpha компоненту або прозорість.

Для того щоб намалювати прямокутник є три функції: fillRect , strokeRect , clearRect - які відповідно малюють прямокутник суцільним кольором , тільки кордон прямокутника , очищають частина області малювання . Всі ці функції отримують як параметр координати лівого верхнього кута прямокутника і його розміри.

function draw () {

var canvas = document.getElementById (' canva ');

if ( canvas.getContext ) {

var ctx = canvas.getContext ('2 d ');

/ / Попереджаючи наступне питання , немає , тривимірного контексту малювання немає ,

/ / Малювати можна тільки на площині

ctx.fillStyle = " rgb ( 200,0,0 )";

ctx.fillRect ( 10 , 10 , 55 , 50);

ctx.fillStyle = " rgba ( 0 , 0 , 200 , 0.5 )";

ctx.fillRect ( 30 , 30 , 55 , 50);

ctx.fillStyle = " rgb ( 0,0,0 )"; / / Чорний колір

ctx.fillRect ( 100,100,100,100 ) ;

ctx.clearRect ( 125,125,60,60 ) ;

ctx.strokeRect ( 150,150 , 120,120 ) ;

}

}

Якщо вам необхідно намалювати більш складну фігуру , то слід використовувати Path . Path - це просто шлях по якому водиться віртуальний олівець. Шлях повинен початися , олівець проводить кілька ліній ( дуг , кривих Безьє , прямокутників і т.д.) , потім шлях закривається (цей крок необов'язковий, наприклад , ви самі довели лінію від останньої точки до першої) . І останній крок - це запуск отрисовки або контуру Path , або її зафарбування , як варіант малюється і контур і фонова зафарбування одночасно.

Для того щоб намалювати лінію ви використовуєте дві базові функції moveTo ( x , y ) , і lineTo ( x , y ) . Перша з них піднімає невидимий олівець і переміщує його в точку ( x , y ) , а другий переміщує олівець в точку ( x , y ) уже ведучи олівець по " листу " .

Якщо вам хочеться намалювати коло , дугу , то використовуйте функцію arc ( x , y , radius , startAngle , endAngle , anticlockwise ) , її параметри соотвественно координати центру кола або дуги , потім йде радіус , параметри startAngle і endAngle - задають початок і кінець дуги в радіанах (і це важливо ), останнім йде параметр anticlockwise - логічний ознака того , чи буде дуга малюватися за годинниковою або проти годинникової стрілки. У прикладі нижче я малюю дві зірки , одна з яких відображається у вигляді контура , другий у вигляді заливки суцільним кольором , також малюється приклад дуги. Для того щоб задати колір контуру використовується властивість strokeStyle .

function draw () {

var canvas = document.getElementById (' canva ');

if ( canvas.getContext ) {

var ctx1 = canvas.getContext ('2 d ');

var ctx2 = canvas.getContext ('2 d ');

ctx1.beginPath ();

ctx2.beginPath ();

var deltaI = 0.1;

ctx1.moveTo ( 200 + 100 * Math.cos ( 0 ) , 200 - 100 * Math.sin ( 0 )) ;

ctx2.moveTo ( 200 + 170 * Math.cos ( 0 ) , 200 - 170 * Math.sin ( 0 )) ;

for ( var i = 0 ; i < 2 * Math.PI ; i + = deltaI ) {

ctx1.lineTo ( 200 + 100 * Math.cos ( i ) , 200 - 100 * Math.sin ( i )) ;

ctx1.lineTo ( 200 + 150 * Math.cos ( i + deltaI ) , 200 - 150 * Math.sin ( i + deltaI )) ;

ctx2.lineTo ( 200 + 170 * Math.cos ( i ) , 200 - 170 * Math.sin ( i )) ;

ctx2.lineTo ( 200 + 190 * Math.cos ( i + deltaI ) , 200 - 190 * Math.sin ( i + deltaI )) ;

}

ctx1.closePath ();

ctx1.stroke ();

ctx2.closePath ();

ctx2.fillStyle = " rgb ( 120,78,89 )";

ctx2.fill ();

}

ctx1.strokeStyle = " rgba ( 255,255,255,125 )";

ctx1.beginPath ();

ctx1.arc ( 200 , 200,40 , 45 * ( Math.PI / 180) , 315 * ( Math.PI / 180) , false ) ;

ctx1.closePath ();

ctx1.stroke ();

}

Зверніть увагу на одночасне існування двох контекстів малювання . Всі приклади коду даної статті ви може знайти на сайті автора: http://black-zorro.jino-net.ru . Наступного разу я покажу як відобразити на canvas існуючі зображення jpeg / gif , а також як працювати з кривими Безьє , крім того , ми зробимо введення в трансформації зміщення , обертання , масштабування.

 

РОЗДІЛ №3

3 Покрокове побудування HTML5 додатку

3.1 Программа

У HTML5 визначений елемент <canvas>, який може бути використаний для відображення діаграм, ігрової графіки або зображень на льоту.

Код для візуалізації полотна з рамкою :

<canvas id = "tablet" width = "900" height = "500">

На цьому полотні й буде відображатися візуалізація та маніпуляція сітками елементів.

Далі розглянемо покрокове побудування HTML5 додатку.
Для того щоб маніпулювати програмою потрібен для цього користувальницький інтерфейс.

Розробимо дві кнопки для маніпулювання програмою:

HTML5:
<input type = "button" id = "_close" name = "_close" value = "Замкнуть" />

JavaScript:

  _closed = new Boolean (false);

  _closed = false;

До натискання :

Після натискання :

<input type = "button" id = "clear" name = "clear" value = "Очистить" />

clear = new Boolean (false);

  clear = false;

До натискання :

Після натискання :

Створимо таблицю фігур:

HTML5:

<div id="FiguresOutput"> Таблица фигур: <br> </ div>

CSS:

# FiguresOutput {

             position: relative;

             float: bottom;

             top: 20px;

JavaScript:

if (coordX.length === 0) {document.getElementById ('FiguresOutput'). innerHTML + = ("Фигура №" + (fn +1) + ":");}

         if (newFigure === true) {document.getElementById ('FiguresOutput'). innerHTML + = ('<br>' + "Фигура №" + (fn +1) + ":");}

         newFigure = false;

Тепер створимо таблицю координат :

HTML5:

<div id="CoordOutput"> Таблиця координат: <br> </ div>

CSS:

# CoordOutput {

             position: relative;

             float: right;

             top:-500px;

             left:-200px;

         }

JavaScript:

coordX [n] = x; var m = n +1;

coordY [n] = y; document.getElementById ('CoordOutput'). innerHTML + = ("Точка" + m + "(" + coordX [n] + ";" + coordY [n] + ");" + '<br>');

               n = n +1;

Список літературі :
Пітер Лабберс, Брайан Олберс, Френк Салім
HTML5 для професіоналів: потужні інструменти для розробки сучасних веб-додатків = Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development. - М.: «Вільямс», 2011. - С. 272. - ISBN 978-5-8459-1715-7

Стівен Хольцнер HTML5 за 10 хвилин, 5-е видання = Sams Teach Yourself HTML5 in 10 Minutes, 5th Edition. - М.: «Вільямс», 2011. - ISBN 978-5-8459-1745-4

David Flanagan - Canvas Pocket Reference.Scripted Graphics for HTML5 2010

Rob_Hawkes-HTML5 Canvas for games & entertainment-2011-ebook

S.Fulton, J.Fulton - HTML5 Canvas – 2011

Чак Муссіано і Білл Кеннеді "HTML і XHTML. Детальний керівництво" 6-е видання. Видавництво: Символ-Плюс, 2008 р.

Ерік А. Мейер "CSS. Каскадні таблиці стилів. Детальний керівництво" 3-е видання. Видавництво: Символ-Плюс, 2008 р.

Роберт Агулар "HTML і CSS. Основа будь-якого сайту" Видавництво: Ексмо, 2010 р.

Е. Кастро "HTML і CSS для створення Web-сторінок" Видавництво: НТ Пресс, 2006 р.

Н. Комолова, Є. Яковлєва "HTML. Самовчитель" 2-е видання. Видавництво: Пітер, 2011 р.

Джейсон Кренфорд Тіге "DHTML і CSS для Internet" 3-е видання. Видавництво: НТ Пресс, 2007 р.


 

А также другие работы, которые могут Вас заинтересовать

83678. Расчет переходных процессов с использованием интеграла Дюамеля 157.5 KB
  Метод переменных состояния Уравнения элекромагнитного состояния – это система уравнений определяющих режим работы состояние электрической цепи. Метод переменных состояния основывается на упорядоченном составлении и решении системы дифференциальных уравнений первого порядка которые разрешены относительно производных т. Количество переменных состояния а следовательно число уравнений состояния равно числу независимых накопителей энергии. К уравнениям состояния выдвигаются два основных требования: независимость уравнений; возможность...
83680. Расчет нелинейных цепей методом эквивалентного генератора 149.5 KB
  Ветвь содержащая нелинейный резистор выделяется из исходной цепи а вся остальная уже линейная схема представляется в виде активного двухполюсника АД. Если необходимо также найти токи в линейной части исходной цепи то после расчета нелинейной схемы на рис. 1б в соответствии с теоремой о компенсации нелинейный резистор заменяется источником ЭДС или тока после чего проводится анализ полученной линейной цепи любым известным методом.
83681. Приобретение и прекращение гражданства РФ 139.5 KB
  Гражданство внутреннем рынке, а также предпосылкой для любой реализации прав и свобод человека, признанных международным правом, чтобы защитить отдельные государства. Гражданство уже известно в эпоху рабовладельческого. Граждане древнего города-государства был принят к людям бесплатно.
83682. Критерии оценки инвестиционных проектов 247.11 KB
  В условиях рыночной экономики возможностей для инвестирования довольно много. Вместе с тем любое предприятие имеет, как правило, ограниченные свободные финансовые ресурсы, доступные для инвестирования. Поэтому необходимо выбирать оптимальный инвестиционный проект, а для этого уметь его правильно оценить.
83683. Кримінологічна характеристика та запобігання статевим злочинам 194 KB
  Метою дослідження є визначення кримінологічної характеристики статевих злочинів, обґрунтування детермінант учинення цих злочинів у сучасній Україні, та розгляд заходів запобігання даної категорії злочинів. Об’єктом наукового дослідження виступає злочинність проти статевої свободи і статевої недоторканості особи.
83685. Управление ТРЦ «Светофор» 535.94 KB
  Этот вид управления ставит своей основной целью повышение доходности объекта и управление его стоимостью. Основной задачей property management является управление процессами маркетинговой, финансовой и юридической деятельности.
83686. Государственное регулирование внешней торговли и внешнеторговая политика Республики Беларусь 185.32 KB
  Цель курсовой работы – изучить государственное регулирование внешней торговли, зарубежный опыт государственного регулировния и внешнеторговую политику Республики Беларусь. В данной работе применяются аналитические и статистические методы исследования и обработки данных.