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

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

path: hover {fill: yellow; }

 

 

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

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

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

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

 

 

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

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