Референсное руководство по Canvas HTML
Референсное руководство по Canvas HTML
Тег HTML <canvas> используется для динамического рисования графиков с помощью скрипта (обычно JavaScript).
Для получения дополнительной информации о <canvas> прочитайте наш учебник по HTML Canvas.
Цвет, стиль и тень
| свойства |
описание |
| fillStyle |
Установить или вернуть цвет, градиент или узор для заливки |
| strokeStyle |
Установить или вернуть цвет, градиент или узор для штриховки |
| shadowColor |
Установить или вернуть цвет тени |
| shadowBlur |
Установить или вернуть уровень размытия тени |
| shadowOffsetX |
Установить или вернуть горизонтальное расстояние тени от формы |
| shadowOffsetY |
Установить или вернуть вертикальное расстояние тени от формы |
Стиль линии
| свойства |
описание |
| 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() |
текст
| свойства |
описание |
| font |
установка или возврат текущих свойств шрифта текста |
| textAlign |
установка или возврат текущего способа выравнивания текста |
| textBaseline |
установка или возврат текущей текстовой базы для рисования текста |
| метод |
описание |
| fillText() |
рисование заливного текста на канву |
| strokeText() |
рисование текста на канву (без заливки) |
| measureText() |
возврат объекта, содержащего ширину указанного текста |
рисование изображения
| метод |
описание |
| drawImage() |
рисование изображения, канвы или видео на канву |
операции с像素ами
| свойства |
описание |
| width |
возврат ширины объекта ImageData |
| height |
возврат высоты объекта ImageData |
| data |
возврат объекта, который содержит изображенные данные указанного объекта ImageData |
| метод |
описание |
| createImageData() |
создание нового, пустого объекта ImageData |
| getImageData() |
возврат объекта ImageData, который содержит изображенные данные на указанном прямоугольнике канвы |
| putImageData() |
возврат изображенных данных (из指定的 объекта ImageData) на канву |
синтез
| свойства |
описание |
| globalAlpha |
установка или возврат текущего alpha или прозрачности рисования |
| globalCompositeOperation |
установка или возврат нового изображения, как его рисовать на существующем изображении |
другое
| метод |
описание |
| save() |
сохранение текущего состояния окружения |
| restore() |
возврат сохраненного ранее состояния пути и свойств |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
