Размещено на http://www.allbest.ru/

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

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

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

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

Кваліфікаційна робота бакалавра

На тему: «Розробка HTML5 додатку для візуалізації та маніпуляції сітками елементів»

Виконав: студент 4 курсу, групи 5130-1

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

Коваль Є.А.

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

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

Запоріжжя - 2014

Зміст

• Вступ
• 1. SVG або Canvas
• 1.1 Векторна графіка
• 1.2 Короткий огляд сценаріїв векторної графіки
• 1.3 Введення в технології
• 1.4 Сценарії використання <canvas> і SVG
• 1.5 Двомірні ігри
• 2. Технічне завдання
• 3. Покрокове побудування HTML5 додатку
• 3.1 Програма
• Список літератури

Вступ

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 завантажується в модель 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 ідеально підходить для виведення даних реального часу при використанні більш поширених сценаріїв. Як уже згадувалося, за допомогою 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>

2. Технічне завдання

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

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

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

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

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

· Виведення координат на екран;

· Можливість очищення вікна canvas.

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

· Алгоритм, зчитування координат з файлу;

· Iмпорт і експорт сіток;

· Система авторизації Yii;

· Сторінка для додавання сіток на сайт;

· Сторінка управління доступними сітками.

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

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

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

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

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 сумісний, крім ПК і ноутбуків, ще й з планшетами, смартфонами і сучасними моделями телевізорів, які надають доступ в інтернет.

Недоліки 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 будуть існувати.

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, але при промальовуванні картинка масштабується відповідно до компонування.

...