HTML Холст Ссылки
Описание
Тег HTML5 <canvas> используется для рисования графики на лету с помощью сценариев (обычно JavaScript).
Однако элемент <canvas> не имеет собственных возможностей рисования (это только контейнер для графики)-для рисования графики необходимо использовать скрипт.
Метод Context () возвращает объект, предоставляющий методы и свойства для рисования на холсте.
Эта ссылка будет охватывать свойства и методы объекта контекста ("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 |
Задание или возврат вертикального расстояния тени от фигуры |
Стили линий
Свойство |
Описание |
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() |
|