НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
Графіка. Уроки W3Schools українською для початківців

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 Встановлює або повертає вертикальну відстань тіні від фігури

Метод Опис
createLinearGradient() Створює лінійний градієнт (для використання на вмісті полотна)
createPattern() Повторює вказаний елемент у вказаному напрямку
createRadialGradient() Створює радіальний/круговий градієнт (для використання на вмісті полотна)
addColorStop() Визначає кольори та положення зупинки в градієнтному об’єкті

Стилі ліній

Властивість Опис
lineCap Встановлює або повертає стиль кінцевих заглушок лінії
lineJoin Встановлює або повертає тип кута, створеного під час зустрічі двох ліній
lineWidth Встановлює або повертає поточну ширину лінії
miterLimit Встановлює або повертає максимальну довжину скосу

Прямокутники

Метод Опис
rect() Створює прямокутник
fillRect() Малює "заповнений" прямокутник
strokeRect() Малює прямокутник (без заливки)
clearRect() Очищає вказані пікселі в заданому прямокутнику

Шляхи

Метод Опис
fill() Заповнює поточний малюнок (шлях)
stroke() Фактично малює шлях, який ви визначили
beginPath() Починає шлях або скидає поточний шлях
moveTo() Переміщує контур до вказаної точки на полотні без створення лінії
closePath() Створює шлях від поточної точки назад до початкової точки
lineTo() Додає нову точку та створює лінію до цієї точки від останньої вказаної точки на полотні
clip() Вирізає область будь-якої форми та розміру з оригінального полотна
quadraticCurveTo() Створює квадратичну криву Безьє
bezierCurveTo() Створює кубічну криву Безьє
arc() Створює дугу/криву (використовується для створення кіл або частин кіл)
arcTo() Створює дугу/криву між двома дотичними
isPointInPath() Повертає true, якщо вказана точка знаходиться на поточному шляху, інакше повертає false

Трансформації

Метод Опис
scale() Збільшує або зменшує поточний малюнок
rotate() Обертає поточний малюнок
translate() Змінює позицію (0,0) на полотні
transform() Замінює поточну матрицю перетворення для креслення
setTransform() Скидає поточне перетворення на одиничну матрицю. Потім запускається transform()

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()