Canvas є тією особливістю яку більшість веб-розробників хочуть використовувати для розробки по-справжньому багатих веб-додатків, і без необхідності для браузера, встановлювати додатково додатки.
Canvas для веб-додатків
Елемент HTML5 Canvas
... дозвіл залежить від растрових canvas, яке можна використовуватися для візуалізації графіки, ігрової графіки і інших візуальних образів.
Отже, як же вставити canvas документ HTML? Дуже просто:
Цей код не чого не покаже в браузері, тому що canvas порожній. Давайте додамо кордон, щоб ви могли побачити його.
На веб-сторінку можна додати кілька елементів canvas. Єдина вимога щоб кожен canvas мав свій ідентифікатор, інакше на сторінці буде однаковий canvas. Щоб на сторінці з'явився canvas, ви повинні посилатися на canvas в контексті. Контекст дає вам доступ до 2D властивості і методи, які дозволяють малювати і маніпулювати зображеннями в canvas. Про контексті поговоримо пізніше.
Кожен графічний елемент має координати х і у.
х - горизонтальні координати
у - вертикальні координати
Різниця між SVG і Canvas
- Canvas швидше при складанні складної графіки
- Ви можете зберігати зображення з canvas, з SVG це не вийде.
- Весь canvas складається з пікселів.
Ось переваги SVG.
- SVG не залежить від дозволу, його можна масштабувати для різних дозволів екрану. Приклад.
- SVG - це XML, і призначених для різних елементів.
- SVG добре використовувати при складній анімації.
А чому не використовувати один з іншим? Якщо ваш сайт не залежить від дозволу, тоді виберіть SVG. Якщо ви розробляєте гру і хочете зробити графіку дуже швидкою, або не хочете мати справу з XML, тоді вибираємо Canvas. В інтернеті вони працюють разом, і доповнюють один одного. Приклад.
Canvas і апаратне прискорення
У більш ранніх версіях браузера, рендеринг графіки - як і більшість ресурсоємних завдань - було покладено на CPU. Сучасні браузери були перероблені в цій області, шляхом перекладу графічних ресурсномістких завдань на GPU, графічний процесор для графіки використовує Direct2D і DirectWrite. Що прискорює обробку графіки і полегшує навантаження на центральний процесор (CPU). приклад
Canvas 2D API
canvas 2D API є об'єкт, який дозволяє малювати і маніпулювати зображеннями і графікою в елементі canvas. Для посилання на контекст canvas використовується метод getContext. який є елементом canvas. Він має один параметр, який в даний час 2-ї. Ось фрагмент коду для посилань на контекст.
Кожен canvas має свій власний контекст, так що якщо ваша сторінка містить кілька елементів Canvas ви повинні мати посилання на кожен контекст.
Крім getContext, є багато інших функцій в canvas 2D API. Найбільш відомі з них перераховані нижче.
- scale - дозволяє масштабувати поточний контекст.
- rotate - дозволяє повертати х і у координати поточного контексту.
- save - дозволяє зберегти поточний стан контексту.
- restore - дозволяє відновити стан контексту з раніше збереженого стану.
- font - отримує або задає шрифт для поточного контексту.
- fillText - заповнить текст до поточного canvas.
- MeasureText - вимірює поточну ширину зазначеного тексту.
Це не всі методи, прикріплені до Canvas 2D API.
Форми і кольору Canvas
прямокутник canvas
Є ціла група властивостей і функцій для малювання фігур. Давайте почнемо з прямокутника. Ось відповідні функції, доступні для малювання прямокутників.
- FillRect (х, у, W, H) - малює прямокутник в Canvas, використовуючи поточний стиль заповнення
- strokeRect (х, у, W, H) - малює вікно, яке описує даний прямокутник в Canvas, використовуючи поточний стиль лінії
- clearRect (х, у, W, H) - видаляє всі пікселі в Canvas, прямокутник стане прозорий чорний
Щоб намалювати прямокутник, найпростіший спосіб полягає у використанні FillRect. Це малює прямокутник на Canvas з використанням поточних FillStyle. Ось як можна створити чорний прямокутник.
Цей код буде показувати чорний прямокутник, з зверху 5 пікселів, з права 5 пікселів і 145 пікселів в ширину і висоту.
Якщо ви не вказали колір, то колір за замовчуванням завжди буде чорний. Щоб намалювати ще один прямокутник, назвіть FillRect з різними параметрами. FillStyle може бути будь-якого кольору, тому він може скористатися непрозорістю сумісність з CSS3. Наступний код малює три прямокутника canvas, різних кольорів, ближній напівпрозорий.
Малювання кіл canvas
Щоб намалювати cirlce (коло), краще використання дугу. Дуга малює коло canvas з використанням поточних FillStyle. Визначення функції нижче.
- дуга (х. у. радіус startAngle. endAngle. проти годинникової стрілки) - дуга робить коло починаючи з кінця початкового кута і закінчується в кінці кінцевого кута.
Ось як можна створити чорний коло в canvas.
Чорний круг canvas
Щоб намалювати контур кола, використовуємо strokeStyle замість FillStyle. Потім виклик stroke замість заповнення.
Коло не повинен бути на 360 градусів. Щоб змінити форму, міняйте початковий і кінцевий радіус.
криві Безьє
Більш складний малюнок з кривими Безьє. Цю важку задачу можна виконати відносно просто за допомогою функції bezierCurveTo. Ця функція вказує на поточний підкаталог за допомогою контрольних точок, які представляють собою криву Безьє. Параметри bezierCurveTo нижче.
- bezierCurveTo (cp1x, cp1y, cp2x, cp2y, х, у) - додає в даній точці поточний шлях, пов'язаний з попереднім на криву Безьє з даними контрольних точок.
Крива Безьє повинна включати в себе три пункти. Перші два пункти контроль розрахунків, а третій, кінцева точка кривої. Ось що можна створити кривими Безьє.
Малюнок з кривими Безьє
З кривими Безьє багато чого можна намалювати. Ось складний приклад складання усміхнене обличчя в canvas.
Колір фону canvas
У canvas можна змішати кольору або залити суцільним кольором навіть зробити градієнт або візерунок. Я використовував FillStyle в основному в попередніх прикладах. Ця функція заповнює фон контексту з кольором і може бути з безліччю квітів. Наступний приклад колір фону, ефект веселки.
Якщо не потрібні суцільний кольору, ви можете використовувати strokeStyle і strokeRect намалювати контур прямокутника. Ще одна особливість canvas дає можливість створення градієнтів. Функції, пов'язані з цим наведені нижче.
- addColorStop (зміщення, колір), - додає зупинку кольору зі значеннями 0.0 зміщенням на одному кінці градієнта, 1.0 зміщення на протилежному кінці
- createLinearGradient (x0, y0, x1, y1) - повертає об'єкт CanvasGradient, який представляє собою лінійний градієнт, фарби по лінії визначаються координатами
- createRadialGradient (х0, у0, г0, x1, y1, r1) - повертає об'єкт CanvasGradient, який представляє собою радіальний градієнт, фарби по конусу дають коло уявлень координатами
Лінійний градієнт може бути створений викликом createLinearGradient. Щоб додати колір градієнта потрібно викликати addColorStop. Виклик цього додає вказаний колір х і у координат. У наступному прикладі показаний простий лінійний градієнт.
Лінії і тіні тексту в canvas
У canvas є шляхи, їх потрібно заповнити. Ось деякі з відповідних властивостей і функцій для малювання ліній.
- lineWidth [= value] - повертає поточну ширину лінії. Установки для зміни ширини лінії.
- LineCap [= value] - повертає поточний стиль лінії контур. Може бути встановлений, щоб змінити стиль контур лінії. Контури лінії можуть бути закруглені і прямі.
- LineJoin [= value] - повертає поточний рядок стилів.
Щоб намалювати лінію ви пишіть функції MoveTo і LineTo. Ці функції приймають х і у координати, які говорять де саме ви хочете намалювати лінію. Ви також можете вказати ширину лінії за допомогою lineWidth. Після того як ви визначили рядок, ви повинні викликати stroke, щоб намалювати лінію.
Наступний приклад демонструє, як малювати серію ліній, починаючи з високою і закінчуючи тонкої.
Щоб додати стиль до лінії, ви можете змінити контур, встановивши LineCap. Що б краю були закругленими, потрібно в контексті застосувати LineCap зі значенням round (круглий).
Закруглені лінії Canvas
Текст в canvas
Текст так само просто намалювати в елементі canvas як і лінії. Деякі з відповідних властивостей і функцій для малювання тексту:
- font [= value] - повертає поточні настройки шрифту. Синтаксис такий же, як і у властивостях CSS
- textAlign [= value] - повертає параметри вирівнювання тексту. Можливі значення: замостити, вліво, вправо, і по центру
- TextBaseline [= value] - повертає поточні настройки вирівнювання лінії. Може бути встановлений, щоб змінити вирівнювання по основних напрямних
- fillText (текст, х, у [, MaxWidth]) - заповнює текст на даній позиції
- strokeText (текст, х, у [, MaxWidth]) - штрихи тексту на даній позиції
Щоб надрукувати текст canvas потрібно використовувати метод fillText. Я встановлюю розмір і тип шрифту за допомогою налаштувань шрифту.
Щоб зробити текст прозорий, встановіть значення для FillStyle.
Додавання ефекту, тінь для тексту canvas. У цьому нам допоможе shadowOffsetX.
Тінь можна налаштувати для будь-якого кута або колір тіні як вам подобається.
Цей код малює вівцю в canvas.
Зображення тепер можна повертати, перевернути, знебарвити.
Перетворення і анімація
Ось деякі з відповідних властивостей і функцій для конвертування валюти.
- scale (x, y) - зміни матриці перетворення для застосування масштабного перетворення з заданими характеристиками
- rotate (angle) - зміни матриці перетворення, щоб застосувати перетворення повороту з заданими характеристиками
- translate (x, y) - зміни матриці перетворення застосувати переклад перетворення з заданими характеристиками
- transform (m11, m12, m21, m22, dx, dy) - зміни матриці перетворення застосувати матрицю c аргументом
- setTransform (m11, m12, m21, m22, dx, dy) - зміни матриці перетворення до матриці з аргументом.
Перетворення і анімація може працювати окремо, але якщо ви об'єднаєте їх, як показано далі, вони можуть зробити потужні візуальні ефекти. Почнемо з обертання, повернемо і будемо обертати контекст в canvas. У наступному прикладі демонструється малювання прямокутника кожні 250 мілісекунд, і кожен прямокутник повертається, як ефект обертового колеса. Колір рандомізований, для отримання блискучого ефекту.
Масштабувати елементи canvas, легко. Будемо дотримуватися попередніх коду, за винятком вращающенія, ми масштабується кожен прямокутник кожну секунду. Ось код.
Для складної анімації, подивіться на блискучі лінії, які створила група W3C тут. Більш детальна інформація про перетвореннях canvas, тут.
Робота з мишею в canvas
Ви напевно вже здогадалися, працювати з мишею в canvas можна. Як і будь-який елемент веб-сторінки, ви можете повернути х і у координати миші методами pageX і pageY.
Щоб відстежувати курсор миші в canvas, ось фрагмент коду.
У наведеному вище прикладі, прикріплене подія захоплення руху миші, тому, коли курсор рухається, х і у координати виводяться на веб-сторінці. Складніше зробити canvas як аркуш паперу, на якому можна малювати.
висновок
Це не велика неповна запис у вигляді уроку, знайте що ці незвичайні ефекти повністю працюють в сучасних браузерах. Надсилайте нам ваші ескізи, можливо вони займуть перше місце на нашому сайті.