HTML DOM Canvas Объект
Объект Canvas
Объект Canvas является новым в HTML5.
Тег HTML5 <Canvas> используется для рисования графики на лету с помощью JavaScript.
Доступ к объекту Canvas
Доступ к элементу <Canvas> можно получить с помощью getElementById ():
Пример
var x = document.getElementById("myCanvas");
Создание объекта Canvas
Можно создать элемент <Canvas> с помощью метода document. CreateElement ():
Пример
var x = document.createElement("CANVAS");
Примечание: Элемент <Canvas> не имеет собственных способностей рисования (это только контейнер для графики)-вы должны использовать скрипт, чтобы реально нарисовать графику.
Метод Context () возвращает объект, предоставляющий методы и свойства для рисования на холсте.
Эта ссылка будет охватывать свойства и методы объекта контекста ("2D"), который может использоваться для рисования текста, линий, прямоугольников, кругов и других объектов на холсте.
Цвета, стили и тени
| Свойство |
Описание |
| 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 |
Преобразования
Текст
| Свойство |
Описание |
| 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() |
|
Стандартные свойства и события
Объект Canvas также поддерживает стандартные Свойства и события.
Похожие страницы
HTML Учебник: HTML5 Canvas
HTML справка: HTML <Canvas> тег
