Последние учебники веб-разработки
 

HTML Canvas Ссылка


Описание

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 Устанавливает или возвращает вертикальное расстояние тени от формы

метод Описание
createLinearGradient() Создает линейный градиент (для использования на содержание холст)
createPattern() Повторяет указанный элемент в указанном направлении
createRadialGradient() Создает радиальное / круговой градиент (для использования на содержание холст)
addColorStop() Задает цвета и положения остановки в градиентной объекта

Стили линий

Имущество Описание
lineCap Устанавливает или возвращает стиль торцевых крышек для линии
lineJoin Устанавливает или возвращает тип угла, созданный, когда две линии пересекаются
lineWidth Устанавливает или возвращает текущую ширину линии
miterLimit Устанавливает или возвращает максимальную длину скоса

Прямоугольники

метод Описание
rect() Создает прямоугольник
fillRect() Рисует "заполненный" прямоугольник
strokeRect() Рисует прямоугольник (без заливки)
clearRect() Очищает указанные пиксели в пределах заданного прямоугольника

пути

метод Описание
fill() Заполняет текущий рисунок (путь)
stroke() На самом деле рисует путь, который вы определили
beginPath() Начинается путь, или сбрасывает текущий путь
moveTo() Перемещение путь к заданной точке в полотне, не создавая линию
closePath() Создает путь из текущей точки обратно к исходной точке
lineTo() Добавляет новую точку и создает линию до этой точки из последней указанной точки на холсте
clip() Клипы область любой формы и размера от оригинального холста
quadraticCurveTo() Создает квадратичную кривую Безье
bezierCurveTo() Создает кубическую кривую Безье
arc() Создает дугу / кривую (используется для создания кругов, или части окружностей)
arcTo() Создает дугу / кривую между двумя касательными
isPointInPath() Возвращает истину, если указанная точка находится в текущем пути, в противном случае ложной

трансформации

метод Описание
scale() Весы текущий рисунок больше или меньше
rotate() Поворачивает текущий чертеж
translate() Переназначает (0,0) положение на холсте
transform() Заменяет текущую матрицу преобразования для рисования
setTransform() Сбрасывает текущее преобразование к единичной матрице. Затем выполняется преобразование ()

Текст

Имущество Описание
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()