JavaScript canvas: опис, можливості, приклади, відгуки

Полотно складається з тегом canvas, але коли кажуть про нього, посилаються на API, який включає в себе набір функцій для малювання ліній, прямокутників, кіл, дуг, масштабування, перетворення графічних елементів. У разі полотна на веб-сторінці це прямокутна область для растрового зображення, в якому кожній координаті присвоюється колір. Canvas jаvascript не створює векторні об'єкти в стилі інших середовищ, таких як SVG або Flash, а тільки растрові в якості малюнка. Фактично можна завантажити зображення в Canvas і маніпулювати його пікселями по одному. Сервіс нещодавно був включений в HTML і не підтримується старими браузерами. Для них зручно надати альтернативний контент у вигляді фіксованого малюнка або пояснювального тексту.

Технологія Canvas проти Flash

Canvas jаvascript (холст) - це стандартний елемент HTML5 оброблюваний сучасними браузерами. Flash - це технологія компанії, яка вимагає установки плагіна. На сьогодні в більшості браузерів встановлений плагін Flash, тому як і раніше, функціонують ті, які не підтримують Canvas. Однак динаміка розвитку свідчить про те, що ситуація може змінитися дуже швидко, так як нові платформи вже не працюють з "Флеш". Однак більшість фахівців в області графіки вважають, що працювати з Flash простіше і швидше, ніж з полотном, оскільки він має розширену середовище графічного дизайну (Adobe Flash CS6), а процес створення графіки Canvas jаvascript трохи важче. Ситуація повинна змінитися з появою фреймворків в стилі paper.js. Однак слід врахувати, що новий сервіс безкоштовний і відкритий, тому не потрібно витрачати гроші на ліцензію. Flash належить Adobe. Це пояснює той факт, що сьогодні складні ігри все ще створюються з його допомогою.


Якщо потрібно використовувати графіку в декількох дозволах, векторна технологія "Флеш" більш ефективна, ніж растровий Canvas. Але для більшості веб-графіки полотно завантажується швидше. Flash вимагає більше ресурсів для запуску, тому на мобільних пристроях у Canvas jаvascript є суттєва перевага. Полотно дозволяє створювати графіку всіх видів, від прямої лінії до інтерактивних ігор, а також дає можливість редагувати зображення, змінювати тон і межі.

Ідентифікатор атрибуту

Canvas - це HTML-елемент, який дозволяє динамічно створювати графіку і анімацію сценаріїв. Його застосування мають широку область застосування: ігри, інтерфейси, графічні редактори, динамічні ефекти і 3D-додатки. Головне переваги сервісу - він не вимагає ніякого додаткового плагіна, тільки один браузер, який підтримує jаvascript html5 Canvas: Safari, Chrome, Firefox, Opera і Internet Explorer. Наприклад, щоб намалювати два прямокутника різних кольорів, використовують кілька функцій API з jаvascript. Спочатку зарезервують простір полотна на сторінці, використовуючи тег HTML, а потім малюють фігури. Розміщення елемента jаvascript html5 Canvas представлено на фото. При бажанні розміщують інші, такі як стиль, щоб вказати атрибути таблиць і визначити їх зовнішній вигляд. Далі перевіряють браузер на сумісність з Canvas, прописують код. З допомогою getElementById () отримують елемент сторінки, який передається як параметр Canvas. Потім одержують доступ до 2D-контексту полотна і виконують стільки методів, скільки потрібно в контексті для малювання елементів анімації Canvas jаvascript.
Далі прописують повний код виконання.

Зображення прямокутника

Щоб намалювати простий сірий прямокутник 450 х 350 пікселів, що займає весь полотно, прописують код. Дані width і height визначають розмір поверхні. Становище, яке займає цей полотно у веб, визначаться тим місцем, де пишуть елемент HTML. Приклади jаvascript Canvas, можна розмістити всередині таблиці або всередині плаваючого контейнера. Якщо платформа не підтримує стиль, з'явиться текст «Ваш браузер не підтримує Canvas». Тоді поміщають тег з захопленням малюнка, який створює полотно. Щоб мати можливість посилатися на конкретний елемент в коді jаvascript, зручно дати йому ідентифікатор, наприклад id = miCanvas. Коли створений елемент, виконують JS код, який робить малюнки. Це повинно бути зроблено після створення полотна. Один із способів виконання - використовувати властивість onload. Як тільки сторінка завантажена, виконується функція drawCanvas (). Перше, що потрібно зробити, це отримати вузол DOM, використовуючи інструкції: var canvas = document.getElementById ('miCanvas'), і передати як параметр ідентифікатор елемента полотна. Далі отримують об'єкт контексту jаvascript Canvas text:var context = canvas.getContext ('2d').
Існує два можливих контексту: 2d для малювання в двох вимірах і webgl для зображення в трьох вимірах. Маючи об'єкт контексту, можна застосувати всі функції і властивості, пов'язані з ним.

Система координат

Початком координат є точка (00), значення координати X йдуть вправо, а значення координати Y йдуть вниз, на відміну від традиційних систем координат. Розміщення об'єкту виконують відносно початку координат, наприклад, прямокутник знаходиться в позиції (9070). Розмір полотна Canvas становить 450 в ширину та у висоту 350 для рядка: context.fillRect (00450 350). Буде намальована заповнена фігура з верхнім правим кутом в точці (00), шириною 450 і висотою 350 тобто вона займе весь полотно прикладу. Щоб намалювати прямокутник без заливки, застосовують: strokeRect (x, y, ширина, висота). В Canvas немає певних функцій для малювання багатокутників, включаючи трикутники і пятиугольники (крім прямокутника). Спосіб роботи з полотном - малювати форми чи шляху (paths). Щоб побудувати форму, спочатку ініціалізують beginPath (), потім поміщають курсор у початкову точку застосовуючи moveTo (x, y). Там буде створена форма з різними можливостями для зображення. Лінії, дуги і криві можна виконати, використовуючи: stroke(), яка малює відкриту або закриту форму без заливки. Якщо порівняти останню крапку з першої, форма буде закрита. Fill () малює замкнуту форму з заливкою. Якщо вона була відкрита, функція створює пряму від останньої до початкової точки, щоб завершити її.

Інструмент створення прямої лінії ClosePath

Використовують closePath () для створення прямий від останньої до початкової точки. Можна виконати попередній код, скопіювавши і вставивши його в поле, а потім натиснути кнопку «Показати написаний код». ] Для зображення кривих існують три основних методи: Arcos, дуги. Curvas de Bezier, криві Безьє. Curvas cuadr?ticas, квадратичні криві. Амплітуда дуги буде йти від початкового кута до кінцевого. Вони вимірюються в радіанах. Якщо параметр напрямку обертання має правдиве логічне значення, дуга піде проти годинникової стрілки. Криві Безьє - це тип ліній, які дуже часто використовуються в дизайні і вимагають початковій, кінцевій, а також деяких контрольних точок. Кращий спосіб познайомитися з кривими Безьє - намалювати їх із застосуванням програм, таких як Illustrator або Inkscape (безкоштовно). Ще можна використовувати симулятор bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y), де cp1x, cp1y - координати першої контрольної точки, cp2x, cp2y - другий, а x і y координати кінцевої точки кривої. Квадратичні криві схожі на попередні, але мають тільки одну контрольну точку - quadraticCurveTo (cp1x, cp1y, x, y), де cp1x, cp1y - первинні координати, а x і y - кінцеві.

Поєднання форм і стилів

Для малювання форми ініціалізують функцію beginPath (), поміщають курсор (moveTo (x, y)), щоб створити фігуру. Щоб опціонально закрити її, використовують closePath (). Малювання за допомогою fill () виконують без заливки і обведення. Цей процес може повторюватися стільки разів, скільки необхідно. Процес схожий на той, коли малюють олівцем на аркуші паперу. Кожен раз, коли закінчують обведення і відривають олівець від паперу, щоб помістити його в нове положення, аналогічні дії виконує moveTo (x, y).
Винятком із загальної формули побудови є функції для малювання прямокутників (strokeRect (x, y, width, height) і fillRect (x, y, width, height)), які починаються з moveTo (x, y) і закінчується штрихом або заливкою. В даному випадку об'єднують усі функції зображення, які потрібні. Кожен раз при ініціалізації форми Canvas відкриває структуру даних у вигляді списку, який заповнюється інструкцією, коли виконуються stroke () або fill ().

Малювання лінійних градієнтів

Canvas jаvascript create має функцію: createLinearGradient (x_ini, y_ini, x_fin і and_fin). Вона дає лінійний градієнт, використовуючи лінію, що визначається початковою точкою (x_ini, y_ini) і кінцевої (x_fin, y_fin). Напрямок цієї прямої показує рух градієнта. Наприклад, якщо потрібно, щоб градієнт йшов у вертикальному напрямку, створюють вертикальну лінію. Вона визначає перший його колір. Довжина вказує на інтенсивність градієнта. Якщо використовуються програми типу Photoshop, операція буде аналогічною. Щоб закінчити визначення градієнта, вказують кольору, які його формують, за допомогою функції: addColorStop (позиція, колір). Параметр position визначає, з якого місця застосовується колір, зазначений другим параметром. Позиція виражається числом від нуля до одиниці. Як мінімум, два різних кольори необхідні для формування градієнта. Наприклад, якщо потрібно, щоб він починався червоним і закінчувався білим: addColorStop (0 «червоний»); addColorStop (1 «white»). Для малювання радіальних градієнтів Canvas має функцію: createRadialGradient (x1 y1 r1 x2 y2 r2). Вона визначає радіальний градієнт на основі двох кіл, кожна з яких з положенням його центру (x, y) і радіусом (r). Якщо центр кіл обох однаковий, то ефект буде рівномірним, тоді як в іншому випадку буде створений ефект сфери, що залежить від радіуса.

Робота з зображеннями

Canvas може працювати з зображеннями в найбільш поширених форматів (GIF, JPEG, PNG) і має функції для управління - розмір і поворот на рівні пікселів. Це дає великі можливості для обробки зображень за допомогою полотна. Можна застосовувати зображення в якості фону, робити ескізи, масштабування і змінювати колір. Першим кроком роботи з полотном є завантаження фото. Є кілька способів зробити це. Поки воно не буде повністю завантажене, користувач не зможе з ним працювати. Два найбільш поширених способу завантаження: Об'єкт всередині jаvascript. Використовуючи нове зображення, створюють екземпляр об'єкта Image, потім присвоюють йому назву і починають використовувати його після завантаження. Зображення веб-сторінки. З допомогою тега завантажують малюнок з тіла сайту і присвоюють йому ідентифікатор, наприклад, ім'я, щоб отримати доступ до нього з використовуваного document.getElementById. Якщо потрібно, щоб воно було видно тільки після обробки, застосовують властивість hidden в тегу. Є й інші способи завантаження, наприклад, використовувати створений малюнок в іншому об'єкті. Його також можна завантажити з допомогою методу dаta: url. Коли завершено завантаження, можна малювати, використовуючи drawImage, який підтримує кілька форматів: drawImage (зображення, х, у). Малюють зображення на полотні, помістивши верхній лівий кут в координатах (x, y). jаvascript Canvas drawimage (зображення, x, y, ширина, висота) дозволяє змінити масштаб зображення. Перші три параметри мають те ж значення, що і в попередньому випадку. Ширина і висота визначають розмір (в пікселях), в якому буде відображатися графіка. Якщо макет більше оригіналу, отримують збільшення зображення, а якщо менше - мініатюризацію. Якщо потрібно, щоб зображення не деформувалося, необхідно підтримувати співвідношення ширини і висоти вихідного зображення. DrawImage (зображення, x1 y1 ширина1 высота1 x2 y2 ширина 2 высота2) масштабує частину малюнка. З допомогою цієї функції на полотні буде відображатися вміст кольорової рамки, її включили в якості фону. Ця функція бере частину вихідного зображення, визначену як x1 y1 (ширина 1 висота 1) і малює цю частину в іншій позиції (x2 y2) і в іншому масштабі (ширина 2 висота 2). В цьому випадку створюють збільшення області, тому що значення ширина і висота 2 більше, ніж 1.

Приклад використання ClearRect

ClearRect прозорий прямокутник малює на полотні. На відміну від функцій rect, strokeRect або fillRect, які зображують кольорову фігуру. Не слід плутати це з малюванням білого прямокутника. Фонове зображення встановлюється CSS, на полотні з'являється чорний прямокутник. Якщо його закрити білим фоном, прозорий буде прихований. Замість цього краще використовувати функцію clearRect для малювання Canvas jаvascript «чистого» прямокутник по всьому полотну, таким чином дозволяючи малюнками просвічуватися. Можна також виконати очищення полотна шляхом встановлення ширини або висоти - просто встановити їх на полотні, надавши йому нового значення: //canvas.width = 600; canvas.width = canvas.width. При цьому виконується скидання матриці перетворення. Canvas jаvascript clearrect очищає всі пікселі на полотні в даному прямокутнику (x, y, w, h) до прозорого чорного. Функція clearCanvas () може бути використана для точної очистки креслення і тексту полотна. Ця функція корисна, коли потрібно видалити весь контекст, щоб додати нові малюнки на порожній макет. Він повинен очищати його кожен раз, коли переміщується миша і малюється нова лінія. Коли натискається кнопка «Встановити номер», випадкове число від 1 до 100 відображається на полотні. Кнопка «Очистити» прибирає всі з контексту, щоб не відображати числа одне над іншим. Це станеться, якщо знову натиснути кнопку «Встановити номер». Синтаксис в даному випадку такий: context.clearRect(x, y, w, h). Це приклад коду для малювання в Canvas jаvascript заповненого прямокутника, використовуючи fillRect, якому потрібно очистити центральну частину. FillRect застосовує ширину і висоту полотна, а clearRect використовує відсотки від цих значень для створення рамки. У цьому прикладі показано тільки метод Canvas jаvascript clear. X, y, ширина і висота очищеного прямокутника показані у відсотках. Послідовність очищення: Завантажити полотно і намалювати лінії на ньому. Викликати clearRect (). Змінити розмір, маніпулюючи висотою та шириною полотна і div-елементами пікселів з співвідношенням 1: 1.

Відгуки користувачів

Canvas відмінно справляється з інтеграцією багатьох сторонніх постачальників, таких як Flipgrid, Padlet і Storyline. Тому він дуже зручний для дизайнера. У відгуках користувачів про функціональності сервісу для роботи з Canvas jаvascript повідомляють наступне: Використовує простий Rich Text Editor, яким легко створювати текст, вставляти картинки та відео, покращувати текст з редактором HTML. Це дає дизайнерові можливість створювати більше, ніж просто текст на сторінці. Відмінно працює зі сторонніми постачальниками, інтегруючи їх прямо в Canvas. Ця властивість дозволяє використовувати додаткові інструменти, такі як McGraw-Hill Connect, Kaltura, Box Office 365 Google Drive і багато інших. Полотно має каскадний підхід до організаційного дизайну на рівні кореневої облікового запису або в рамках будь-якої додаткової. Кожен субрахунок успадковує атрибути своїх "батьків". Управління всіма цими елементами стало неймовірно простим завдяки використанню SIS-імпорту файлів .csv. Instructure постійно оновлює документацію сервісу. Canvas - це система управління навчанням, яка може використовуватися невеликий організацією, що пропонує всього пару уроків на місцевому рівні, або гігантської організацією, що пропонує тисячі курсів для сотень тисяч студентів по всьому світу. Масштабованість примірника Canvas дуже потужна. Сервіс інтуїтивно зрозумілий і добре настроюється. Надає гнучку платформу, де користувач може поділитися досвідом з іншими. Підходить для інтеграції з багатьма корисними службами, такими як Drive. Це досить зручно, оскільки можна використовувати тільки ті функції, які потрібні. Інтеграція з Gmail Drive і може бути більш інтуїтивною. У Canvas відмінне обслуговування клієнтів. Додані нові продукти і поліпшення. Полотно дуже гнучкий, дозволяє дублювати окремі завдання. Canvas добре інтегрується з Crocodoc для онлайн коментування та оцінки робіт, має відмінні функції імпорту. Одна з важливих особливостей, яку хотіли б бачити користувачі, це можливість анотувати PDF-файли або інші документи на веб-платформі Canvas. В даний час в веб-версії такої функції немає.