En
HTML Canvas Довідник
Опис
HTML5 тег <canvas> використовується для малювання графіки на льоту за допомогою скриптів (зазвичай JavaScript).
Однак елемент <canvas> не має власних можливостей малювання (це лише контейнер для графіки) - ви повинні використовувати скрипт, щоб фактично намалювати графіку.
Метод getContext() повертає об’єкт, який надає методи та властивості для малювання в Canvas.
Це посилання охоплює властивості та методи об’єкта getContext("2d"), який можна використовувати для малювання тексту, ліній, прямокутників, кіл тощо в Canvas.
Підтримка браузерами
Числа в таблиці вказують на першу версію браузера, яка повністю підтримує елемент.
| Елемент |
|
|
|
|
|
| <canvas> |
4.0 |
9.0 |
2.0 |
3.1 |
9.0 |
Internet Explorer 9, Firefox, Opera, Chrome і Safari підтримують <canvas> і його властивості та методи.
Нотатка: Internet Explorer 8 і попередні версії, не підтримують елемент <canvas>.
Кольори, стилі та тіні
| Властивість |
Опис |
| fillStyle |
Встановлює або повертає колір, градієнт або візерунок, який використовується для заповнення малюнка |
| strokeStyle |
Встановлює або повертає колір, градієнт або візерунок, які використовуються для штрихів |
| shadowColor |
Встановлює або повертає колір для тіней |
| shadowBlur |
Встановлює або повертає рівень розмиття для тіней |
| shadowOffsetX |
Встановлює або повертає горизонтальну відстань тіні від фігури |
| shadowOffsetY |
Встановлює або повертає вертикальну відстань тіні від фігури |
Стилі ліній
| Властивість |
Опис |
| lineCap |
Встановлює або повертає стиль кінцевих заглушок лінії |
| lineJoin |
Встановлює або повертає тип кута, створеного під час зустрічі двох ліній |
| lineWidth |
Встановлює або повертає поточну ширину лінії |
| miterLimit |
Встановлює або повертає максимальну довжину скосу |
Прямокутники
Шляхи
| Метод |
Опис |
| fill() |
Заповнює поточний малюнок (шлях) |
| stroke() |
Фактично малює шлях, який ви визначили |
| beginPath() |
Починає шлях або скидає поточний шлях |
| moveTo() |
Переміщує контур до вказаної точки на полотні без створення лінії |
| closePath() |
Створює шлях від поточної точки назад до початкової точки |
| lineTo() |
Додає нову точку та створює лінію до цієї точки від останньої вказаної точки на полотні |
| clip() |
Вирізає область будь-якої форми та розміру з оригінального полотна |
| quadraticCurveTo() |
Створює квадратичну криву Безьє |
| bezierCurveTo() |
Створює кубічну криву Безьє |
| arc() |
Створює дугу/криву (використовується для створення кіл або частин кіл) |
| arcTo() |
Створює дугу/криву між двома дотичними |
| isPointInPath() |
Повертає true, якщо вказана точка знаходиться на поточному шляху, інакше повертає false |
Трансформації
Text
| Властивість |
Опис |
| font |
Встановлює або повертає поточні властивості шрифту для текстового вмісту |
| textAlign |
Встановлює або повертає поточне вирівнювання текстового вмісту |
| textBaseline |
Встановлює або повертає поточну базову лінію тексту, яка використовується під час малювання тексту |
| Метод |
Опис |
| fillText() |
Малює "заповнений" текст на полотні |
| strokeText() |
Малює текст на полотні (без заливки) |
| measureText() |
Повертає об’єкт, який містить ширину вказаного тексту |
Малюнок зображення
| Метод |
Опис |
| drawImage() |
Малює зображення, полотно або відео на полотні |
Маніпуляція пікселями
| Властивість |
Опис |
| width |
Повертає ширину об’єкта ImageData |
| height |
Повертає висоту об’єкта ImageData |
| data |
Повертає об’єкт, який містить дані зображення вказаного об’єкта ImageData |
| Метод |
Опис |
| createImageData() |
Створює новий порожній об’єкт ImageData |
| getImageData() |
Повертає об’єкт ImageData, який копіює піксельні дані для вказаного прямокутника на полотні |
| putImageData() |
Повертає дані зображення (з указаного об’єкта ImageData) на полотно |
Композитинг
| Властивість |
Опис |
| globalAlpha |
Встановлює або повертає поточне значення альфа або прозорості малюнка |
| globalCompositeOperation |
Встановлює або повертає спосіб нанесення нового зображення на наявне зображення |
Інше
| Метод |
Опис |
| save() |
Зберігає стан поточного контексту |
| restore() |
Повертає попередньо збережений стан шляху та атрибути |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
