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() |
|