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

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

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

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