En
HTML Canvas Довідник
Опис
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 (неправда) |
Трансформації
| Метод |
Опис |
| scale() |
Масштабує поточний малюнок, роблячи більшим або меньшим |
| rotate() |
Обертає поточний малюнок |
| translate() |
Змінює позицію (0,0) на полотні |
| transform() |
Замінює поточну матрицю трансформації для малюнка |
| setTransform() |
Скидує поточне перетворення на ідентичну матрицю. Потім запускається transform() |
Текст
| Властивості |
Опис |
| font |
Встановлює або повертає поточні властивості шрифту для текстового змісту |
| textAlign |
Встановлює або повертає поточне вирівнювання для текстового змісту |
| textBaseline |
Встановлює або повертає поточну текстову базову лінію, яка використовується при малюванні текста |
| Метод |
Опис |
| fillText() |
Малює 'заповнений' текст (із заливкою) на полотні |
| strokeText() |
Малює текст на полотні (без заливки) |
| measureText() |
Повертає об’єкт, який містить ширину вказаного тексту |
Малювання зображення
| Метод |
Опис |
| drawImage() |
Малює зображення, полотно або відео в canvas |
Піксельна маніпуляція
| Властивості |
Опис |
| width |
Повертає ширину об’єкта ImageData |
| height |
Повертає висоту об’єкта ImageData |
| data |
Повертає об’єкт, який містить дані зображення вказаного об’єкта ImageData |
| Метод |
Опис |
| createImageData() |
Створює новий, пустий об’єкт ImageData |
| getImageData() |
Повертає об’єкт ImageData, який копіює піксельні дані для заданого прямокутника в canvas |
| putImageData() |
Повертає дані зображення (із вказаного об’єкта ImageData) назад в canvas |
Композиція
| Властивості |
Опис |
| globalAlpha |
Встановлює або повертає поточне значення альфа або прозорості малюнка |
| globalCompositeOperation |
Встановлює або повертає спосіб малювання нового зображення на існуючому зображенні. |
Інше
| Метод |
Опис |
| save() |
Зберігає стан поточного контексту |
| restore() |
Повертає раніше збережений стан контуру та атрибути |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
