Справочник Canvas
Элемент HTML5 <canvas> используется для рисования графики с помощью скриптов (чаще всего JavaScript). Однако сам по себе элемент <canvas> не имеет встроенных возможностей для рисования. Чтобы создать графику, необходимо использовать скрипт, так как <canvas> является лишь контейнером для графики.
Метод getContext() возвращает объект, содержащий свойства и методы для рисования на холсте.
Цвета, стили и тени
| Property | Description |
|---|---|
| fillStyle | Устанавливает или возвращает цвет, градиент или узор, используемые для заливки фигур. |
| strokeStyle | Устанавливает или возвращает цвет, градиент или узор, используемые для обводки фигур. |
| shadowColor | Устанавливает или возвращает цвет теней. |
| shadowBlur | Устанавливает или возвращает уровень размытия теней. |
| shadowOffsetX | Устанавливает или возвращает смещение тени по оси X. |
| shadowOffsetY | Устанавливает или возвращает смещение тени по оси Y. |
| Method | Description |
|---|---|
| createLinearGradient() | Создает линейный градиент для использования на холсте. |
| createPattern() | Повторяет указанный элемент в заданном направлении. |
| createRadialGradient() | Создает круговой/радиальный градиент для использования на холсте. |
| addColorStop() | Определяет цвета и позиции остановок в объекте градиента. |
Стили линий
| Property | Description |
|---|---|
| lineCap | Устанавливает или возвращает стиль концов линии. |
| lineJoin | Устанавливает или возвращает тип соединяемых углов. |
| lineWidth | Устанавливает или возвращает ширину текущей линии. |
| miterLimit | Устанавливает или возвращает максимальную длину скоса. |
| lineDash | Устанавливает или возвращает массив чисел, задающих узор пунктирной линии. |
| lineDashOffset | Устанавливает или возвращает смещение для узора пунктирной линии. |
Прямоугольники
| Method | Description |
|---|---|
| rect() | Создает прямоугольники. |
| fillRect() | Рисует залитые прямоугольники. |
| strokeRect() | Рисует контуры прямоугольников. |
| clearRect() | Очищает указанные пиксели в заданном прямоугольнике. |
Пути
| Method | Description |
|---|---|
| fill() | Заливает текущие подпути текущим fillStyle. |
| stroke() | Обводит текущие подпути текущим strokeStyle. |
| beginPath() | Начинает новый путь или сбрасывает текущий путь. |
| moveTo() | Перемещает путь к заданной точке на холсте без рисования линии. |
| closePath() | Добавляет путь от текущей точки обратно к начальной. |
| lineTo() | Добавляет линию к текущему подпути. |
| clip() | Создает область отсечения на основе текущего пути. |
| quadraticCurveTo() | Добавляет квадратичную кривую Безье. |
| bezierCurveTo() | Добавляет кубическую кривую Безье. |
| arc() | Добавляет дугу/кривую для создания кругов или их частей. |
| arcTo() | Добавляет дугу/кривую между двумя касательными. |
| isPointInPath() | Определяет, находится ли указанная точка внутри текущего пути или нет. |
Преобразования
| Method | Description |
|---|---|
| scale() | Масштабирует текущий рисунок (увеличивает или уменьшает). |
| rotate() | Поворачивает текущий рисунок. |
| translate() | Изменяет систему координат холста. |
| transform() | Применяет матрицу преобразования к холсту. |
| setTransform() | Аналогичен transform(). Может использоваться для наклона, масштабирования и перемещения холста. |
Текст
| Property | Description |
|---|---|
| font | Устанавливает внешний вид текста, нарисованного на холсте. |
| textAlign | Устанавливает выравнивание текста на холсте. |
| textBaseline | Устанавливает вертикальное выравнивание текста на холсте. |
| Method | Description |
|---|---|
| fillText() | Добавляет текст на холст. |
| strokeText() | Добавляет обведенный текст на холст. |
| measureText() | Измеряет ширину текста. |
Рисование изображений
| Method | Description |
|---|---|
| drawImage() | Рисует изображение, видео или другой холст на текущем холсте. |
Работа с пикселями
| Property | Description |
|---|---|
| width | Возвращает ширину объекта ImageData. |
| height | Возвращает высоту объекта ImageData. |
| data | Возвращает массив Uint8ClampedArray, содержащий данные пикселей. |
| Method | Description |
|---|---|
| createImageData() | Создает новый объект ImageData. |
| getImageData() | Возвращает объект ImageData, содержащий копию данных пикселей для заданного прямоугольника. |
| putImageData() | Записывает данные изображения на холст из объекта ImageData. |
Композитинг
| Property | Description |
|---|---|
| globalAlpha | Устанавливает или возвращает текущее значение альфа-канала/прозрачности. |
| globalCompositeOperation | Устанавливает или возвращает тип операции композитинга при рисовании нового изображения. |
Прочее
| Method | Description |
|---|---|
| save() | Сохраняет текущее состояние контекста. |
| restore() | Восстанавливает состояние пути и атрибуты, сохраненные ранее. |
Примечание: getContext() и toDataURL() являются методами самого элемента <canvas>, а не контекста рисования.
Practice
Что может делать метод getContext('2d') в HTML5 Canvas?