САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ

HTML Холст



Описание

Тег <canvas> HTML5 используется для рисования графики, по ходу, с помощью сценариев (обычно JavaScript).

Тем не менее, элемент& lt;canvas> не имеет собственных возможностей рисования (это только контейнер для графики) - вы должны использовать сценарий, чтобы нарисовать графику.

Метод getContext() возвращает объект, который содержит методы и свойства для рисования на холсте.

Эта справочник будет охватывать свойства и методы объекта getContext("2d"), который может быть использован для рисования текста, линий, полей, кругов и многое другое - на холсте.


Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент.

Элемент
<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()

Текст

Свойство Описание
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()