Описание HTML5 <canvas> тег используется для создания графики, на лету, с помощью сценариев (обычно JavaScript).
Тем не менее, <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() Возвращает истину, если указанная точка находится в текущем пути, в противном случае ложной
трансформации Текст Имущество Описание font Устанавливает или возвращает текущие свойства шрифта для текстового содержимого textAlign Устанавливает или возвращает текущее выравнивание для текста содержания textBaseline Устанавливает или возвращает текущий текст базовой линии используется при рисовании текста
метод Описание fillText() Рисует "заполненный" текст на холсте strokeText() Рисует текст на холсте (без заливки) measureText() Возвращает объект, который содержит ширину указанного текста
изображение Drawing метод Описание drawImage() Рисует изображение, холст или видео на холст
Pixel Манипуляция Имущество Описание width Возвращает ширину объекта ImageData height Возвращает высоту объекта ImageData data Возвращает объект, который содержит данные изображения заданного объекта ImageData
метод Описание createImageData() Создает новый пустой объект ImageData getImageData() Возвращает объект ImageData, который копирует данные пикселя для указанного прямоугольника на холсте putImageData() Ставит данные изображения (от указанного объекта ImageData) обратно на холсте
Compositing Имущество Описание globalAlpha Устанавливает или возвращает текущую альфа или прозрачности значение чертежа globalCompositeOperation Устанавливает или возвращает, как новое изображение нарисованы на существующее изображение
Другие метод Описание save() Сохраняет состояние текущего контекста restore() Возвращает ранее сохраненного состояния пути и атрибуты createEvent() getContext() toDataURL()