Холст объекта
Canvas Объект является новым в HTML5.
HTML5 <canvas> тег используется для создания графики на лету с помощью JavaScript.
Доступ к Canvas объекта
Вы можете получить доступ к <canvas> элемент с помощью getElementById() :
Создание объекта Canvas
Вы можете создать <canvas> элемент с помощью document. createElement() document. createElement() Метод:
Примечание: <canvas> элемент не имеет чертежные способности своих собственных (это только контейнер для графики) - вы должны использовать сценарий на самом деле рисовать графики.
getContext() метод возвращает объект , который обеспечивает методы и свойства для рисования на холсте.
Эта ссылка будет охватывать свойства и методы getContext("2d") объекта, который может быть использован для рисования текста, линий, коробки, кружки и многое другое - на холсте.
Цвета, стили и тень
| Имущество | Описание |
|---|
| fillStyle | Устанавливает или возвращает цвет, градиент или шаблон, используемый для заполнения чертежа |
| strokeStyle | Устанавливает или возвращает цвет, градиент или шаблон, используемый для ударов |
| shadowColor | Устанавливает или возвращает цвет, используемый для теней |
| shadowBlur | Устанавливает или возвращает уровень размытия для теней |
| shadowOffsetX | Устанавливает или возвращает горизонтальное расстояние тени от формы |
| shadowOffsetY | Устанавливает или возвращает вертикальное расстояние тени от формы |
Стили линий
| Имущество | Описание |
|---|
| lineCap | Устанавливает или возвращает стиль заглушек для линии |
| lineJoin | Устанавливает или возвращает тип угла, созданный, когда две линии пересекаются |
| lineWidth | Устанавливает или возвращает текущую ширину линии |
| miterLimit | Устанавливает или возвращает максимальную длину скоса |
Прямоугольники
| метод | Описание |
|---|
| rect() | Создает прямоугольник |
| fillRect() | Рисует "filled" прямоугольник |
| strokeRect() | Рисует прямоугольник (no fill) |
| clearRect() | Удаляет указанные пиксели в пределах заданного прямоугольника |
пути
| метод | Описание |
|---|
| fill() | Заполняет текущий рисунок (path) |
| stroke() | На самом деле рисует путь, который вы определили |
| beginPath() | Начинается путь, или сбрасывает текущий путь |
| moveTo() | Перемещение пути к заданной точке в полотне, без создания линии |
| closePath() | Создает путь от текущей точки обратно к исходной точке |
| lineTo() | Добавляет новую точку и создает линию от этой точки до последней указанной точки на холсте |
| clip() | Клипы области любой формы и размера от первоначального холста |
| quadraticCurveTo() | Создает квадратичную кривую Безье |
| bezierCurveTo() | Создает кубическую кривую Безье |
| arc() | Создает дугу / кривой (used to create circles, or parts of circles) |
| arcTo() | Создает дугу / кривой между двумя касательными |
| isPointInPath() | Возвращает истину, если указанная точка находится в текущем пути, в противном случае ложного |
Трансформации
| метод | Описание |
|---|
| scale() | Весы текущий рисунок больше или меньше |
| rotate() | Поворачивает текущий чертеж |
| translate() | Переназначение (0,0) положение на холсте |
| transform() | Заменяет текущую матрицу преобразования для рисования |
| setTransform() | Сбрасывает текущее преобразование к единичной матрице. Затем выполняется transform() |
Текст
| Имущество | Описание |
|---|
| font | Устанавливает или возвращает текущие свойства шрифта для текстового содержимого |
| textAlign | Устанавливает или возвращает текущее выравнивание для текстового контента |
| textBaseline | Устанавливает или возвращает текущий текст базовой линии используется при рисовании текста |
изображение Drawing
| метод | Описание |
|---|
| drawImage() | Рисует образ, холст, или видео на холст |
Pixel Манипуляция
| Имущество | Описание |
|---|
| width | Возвращает ширину объекта ImageData |
| height | Возвращает высоту объекта ImageData |
| data | Возвращает объект, который содержит данные изображения заданного объекта ImageData |
| метод | Описание |
|---|
| createImageData() | Создает новый пустой объект ImageData |
| getImageData() | Возвращает объект ImageData, который копирует данные пикселя для указанного прямоугольника на холсте |
| putImageData() | Помещает данные изображения (from a specified ImageData object) обратно на холсте |
Compositing
| Имущество | Описание |
|---|
| globalAlpha | Устанавливает или возвращает текущий альфа или прозрачности значения чертежа |
| globalCompositeOperation | Устанавливает или возвращает как новое изображение нарисованы на существующее изображение |
Другие
| метод | Описание |
|---|
| save() | Сохраняет состояние текущего контекста |
| restore() | Возвращает ранее сохраненное состояние пути и атрибуты |
| createEvent() | |
| getContext() | |
| toDataURL() | |
Стандартные свойства и события
Объект холст также поддерживает стандартные свойства и события .
Похожие страницы
HTML учебник: HTML5 Canvas
HTML ссылка: HTML <canvas> тег