HTML Canvas (холст)
Описание
Тег <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 |
Устанавливает или возвращает вертикальное расстояние тени от фигуры |
Стиль строки
| Свойство |
Описание |
| 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() |
|
×
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
