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

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

У випадку полотна на веб-сторінці це прямокутна область для растрового зображення, в якому кожній координаті присвоюється колір. Canvas JavaScript не створює векторні об`єкти в стилі інших середовищ, таких як SVG або Flash, а лише растрові як малюнок.

Насправді можна завантажити зображення в Canvas і маніпулювати його пікселями по одному. Послуга нещодавно була включена в HTML і не підтримується старими браузерами. Для них зручно надати альтернативний контент у вигляді фіксованого малюнка або пояснювального тексту.

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

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

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

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

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

Canvas-це елемент HTML, який дозволяє динамічно створювати графіку та анімацію сценаріїв. Його додатки мають широку сферу застосування: ігри, інтерфейси, графічні редактори, динамічні ефекти і 3D-додатки.

Головне переваги сервісу-він не вимагає ніякого додаткового плагіна, тільки один браузер, який підтримує JavaScript html5 Canvas: Safari, Chrome, Firefox, Opera і Internet Explorer.

Наприклад, щоб намалювати два прямокутника різних кольорів, використовують кілька функцій API з JavaScript. Спочатку зарезервують простір полотна на сторінці, використовуючи мітку HTML, а потім малюють фігури. Розміщення елемента JavaScript html5 Canvas представлено на фото.

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

Далі перевіряють браузер на сумісність з Canvas, прописують код.

За допомогою getElementById () отримують елемент сторінки, який передається як параметр Canvas. Потім отримують доступ до 2D-контексту полотна і виконують стільки методів, скільки потрібно в контексті для малювання елементів анімації Canvas JavaScript.

Далі прописують повний код виконання.

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

Щоб намалювати простий сірий прямокутник 450 х 350 пікселів, що займає все полотно, прописують код.

Дані width І height визначають розмір поверхні. Положення, яке займає це полотно всередині веб, визначаться тим місцем, де пишуть елемент HTML. Приклади JavaScript Canvas, можна розмістити всередині таблиці або всередині плаваючого контейнера.

Якщо платформа не підтримує стиль, з`явиться текст " ваш браузер не підтримує Canvas». Тоді поміщають тег із захопленням малюнка, який створює полотно. Щоб мати можливість посилатися на певний елемент у коді Javascript, зручно надати йому ідентифікатор, наприклад id = miCanvas.

Коли створений елемент, виконують код JS, який робить малюнки. Це має бути зроблено після створення полотна. Одним із способів виконання є використання властивості onLoad. Після завантаження сторінки виконується функція drawCanvas ().

Перше, що потрібно зробити, це отримати вузол DOM, використовуючи інструкції: var canvas = document.getElementById (`miCanvas`), і передати як параметр ідентифікатор елемента полотна. Далі отримують об`єкт контексту JavaScript Canvas text: var context = canvas.getContext (`2d`).

Існує два можливі контексти: 2d для малювання у двох вимірах та webgl для зображення у трьох вимірах. Маючи об`єкт контексту, можна застосувати всі функції та властивості, пов`язані з ним.

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

Початком координат є точка (0,0), значення координати X йдуть вправо, а значення координати Y йдуть вниз, на відміну від систем традиційних координат. Розміщення об`єкта виконують щодо початку координат, наприклад, прямокутник знаходиться в позиції (90,70). Розмір полотна Canvas становить 450 в ширину і 350 у висоту для рядка: context.fillRect (0, 0, 450, 350). Буде намальована заповнена фігура з верхнім правим кутом в точці (0,0), шириною 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 JavaScript 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) і має функції для управління-розмір і поворот на рівні пікселів. Це дає великі можливості для обробки малюнків за допомогою полотна. Можна застосовувати зображення в якості фону, робити ескізи, масштабування і змінювати колір.

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

1. Об`єкт всередині Javascript. Використовуючи нове зображення, створюють екземпляр об`єкта Image, потім привласнюють йому назву і починають використовувати його після завантаження.
2. Зображення веб-сторінки. За допомогою тега завантажують малюнок з тіла сайту і присвоюють йому ідентифікатор, наприклад, ім`я, щоб отримати доступ до нього з використовуваного document.getElementById.

Якщо потрібно, щоб воно було видно тільки після обробки, застосовують властивість hidden в тезі. Є й інші способи завантаження, наприклад, використовувати створений малюнок в іншому об`єкті. Його також можна завантажити за допомогою методу data: url. Коли завершена завантаження, можна малювати, використовуючи drawImage, який підтримує кілька форматів: drawImage (зображення, х,у) . Малюють зображення на полотні, помістивши верхній лівий кут в координатах (x, y) .

JavaScript 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 JavaScript» чистого " прямокутник по всьому полотну, таким чином дозволяючи малюнкам просвічуватися.

Можна також виконати очищення полотна шляхом установки ширини або висоти - просто встановити їх на полотні, присвоївши йому нове значення:

• // canvas.width = 600;
• canvas.width = canvas.width.

При цьому виконується скидання матриці перетворення.

Canvas JavaScript clearrect очищає всі пікселі на полотні в даному прямокутнику (x, y, w, h) до прозорого чорного. Функція clearCanvas () може бути використана для точного очищення креслення і тексту полотна. Ця функція корисна, коли потрібно видалити весь контекст, щоб додати нові малюнки на порожній макет. Він повинен очищати його щоразу, коли миша рухається і малюється Нова лінія.

Коли натискається кнопка "Встановити номер", випадкове число від 1 до 100 відображається на полотні. Кнопка "Очистити" прибирає все з контексту, щоб не відображати числа одне над іншим. Це станеться, якщо знову натиснути кнопку " Встановити номер».

Синтаксис у цьому випадку такий: context.clearRect(x, y, w, h).

Це приклад коду для малювання в Canvas JavaScript заповненого прямокутника, використовуючи fillRect, якому потрібно очистити центральну частину. FillRect застосовує ширину та висоту полотна, а clearRect використовує відсотки від цих значень для створення кадру. У цьому прикладі показано лише метод Canvas JavaScript clear. X, y, ширина та Висота очищеного прямокутника показані у відсотках.

Послідовність очищення:

• Завантажити полотно і намалювати лінії на ньому.
• Викликати clearRect ().
• Змініть розмір, маніпулюючи шириною та висотою полотна та елементами div із співвідношенням пікселів 1: 1.

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

Canvas чудово справляється з інтеграцією багатьох сторонніх постачальників, таких як Flipgrid, Padlet та Storyline. Тому він дуже зручний для дизайнера.

У відгуках користувачі про функціональність сервісу для роботи з Canvas JavaScript повідомляють наступне:

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

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