Контекст канвас страницы
Context
canvas
Ссылка на Canvas
fillStyle
Цвет заливки, можно задать через CanvasGradient
,
CanvasPattern
ctx.fillStyle = 'red';
font
Шрифт для рисования текста
ctx.font = '14px Arial';
globalAlpha
Уровень прозрачности, от 0 до 1
globalCompositeOperation
Управляет порядком объединения пикселов
copy (R = S), Исходный пиксел рисуется без учета целевого пиксела.
destination-atop (R = (1-α d )S + α s D), Исходный пиксел рисуется под целевым. Если исходный пиксел является прозрачным, результирующийпиксел также будет прозрачным.
destination-in (R = α s D), Целевой пиксел умножается на непрозрачность исходного, но цвет исходного пиксела игнорируется.
destination-out (R = (1-α s )D), Целевой пиксел делается прозрачным, если исходный пиксел непрозрачен, и остается без изменений, если исходный пиксел прозрачен. Цвет исходного пиксела игнорируется.
destination-over (R = (1-α d )S + D), Исходный пиксел рисуется под целевым, и его видимость зависит от прозрачности целевого пиксела.
lighter (R = S + D), Цветовые составляющие двух пикселов просто складываются, а их суммы обрезаются, если превышают максимально возможное значение.
source-atop (R = α d S + (1-α s )D), Исходный пиксел рисуется поверх целевого, но умножается на его непрозрачность. Поверх совершенно прозрачного целевого пиксела ничего не рисуется.
source-in (R = α d S), Исходный пиксел умножается на непрозрачность целевого. Цвет целевого пиксела игнорируется. Если целевой пиксел является прозрачным, результирующий пиксел также будет прозрачным.
source-out (R = (1-α d )S), Результирующий пиксел получит цвет исходного, если целевой пиксел прозрачен, и прозрачным, если целевой пиксел непрозрачен. Цвет целевого пиксела игнорируется.
source-over (R = S + (1-α s )D), Исходный пиксел рисуется поверх целевого. Если исходный пиксел является полупрозрачным, цвет целевого пиксела будет влиять на цвет результата. Это значение является значением по умолчанию
xor (R = (1-α d )S + (1-α s )D), Если исходный пиксел прозрачен, резeльтатом композиции станет целевой пиксел. Если целевой пиксел прозрачен, результатом станет исходный пиксел. Если оба пиксела, исходный и целевой, являются прозрачными или непрозрачными, в результате получится прозрачный пиксел.
linaCap
Окончание линии
butt - Это значение по умолчанию. Оно указывает, что окончания линий не должны рисоваться. В этом случае конец линии выглядит просто как перпендикуляр к боковым сторонам линии. Линия не выступает за свои конечные точки.
round - Это значение указывает, что линия должна иметь наконечник в виде полукру га с диаметром, равным толщине линии; в результате линия выступает за ко нечные точки на половину своей толщины.
square - Это значение указывает, что линия должна иметь окончание в виде квадрата. Это значение по своему поведению напоминает значение «butt», но при исполь зовании данного значения линия выступает за конечные точки на половину своей толщины.
lineJoin
Тип скругления углов.
miter - значение по умолчанию, внешние края двух линий в точке сопряжения должны быть продолжены, пока они не пересекутся.
round - скругление, внешние края линий, образующих вершину, должны сопрягаться закрашенной дугой, диаметр которой равен толщине линий
bevel - фаска, внешние края линий, образующих вершину, должны сопрягаться закрашенным треугольником
lineWidth
Толщина линий обводки
ctx.lineWidth = 3;
miterLimit
Максимальная длина сопряжения для типа скругления углов, mitter
shadowBlur
Степень размытия краев тени
shadowColor
Цвет тени
shadowOffsetX, shadowOffsetY
Смещение тени
strokeStyle
Цвет линии, можно задать через CanvasGradient
, CanvasPattern
ctx.strokeStyle = 'red';
textAlign
Выравнивание текста по горизонтали
textBaseline
Положение базовой линии
arc
(x, y, radius, startAngle, endAngle[, anticlockwise])Рисование дуг
ctx.arc(100, 100, 30, 0, Math.PI * 2);
arcTo
(x1, y1, x2, y2, radius)Рисование дуг
beginPath();
Начинаем рисование геометрической фигуры
ctx.beginPath();
bezierCurveTo
(cp1x, cp1y, cp2x, cp2y, x, y)Рисование кривых Безье третьего порядка
clearRect
(x, y, h, w)Очистка указанной области
ctx.clearRect(0, 0, 50, 50);
clip
()Вычисляет пересечение внутренней области текущего контура с текущей областью отсечки и использует эту полученную область как новую область отсечки.
closePath
()Замыкаем линии геометрической фигуры
ctx.closePath();
createImageData
(imagedata)createImageData
(w, h)Возвращает ImageData
createLinearGradient
(x0, y0, x1, y1)Возвращает CanvasGradient
createPattern
(image, reppetition)Возвращает CanvasPattern
, шаблон заполнения холста на основе готового изображения
reppetition
repeat - Изображение выкладывается мозаикой в обоих направлениях. Это значение по умолчанию.
repeat-x - Изображение выкладывается мозаикой только по оси X.
repeat-y - Изображение выкладывается мозаикой только по оси Y.
no-repeat - Изображение мозаики не повторяется, а используется однократно.
createRadialGradient
(x0, y0. r0, x1, y1, r1)Возвращает CanvasGradient
drawImage
(img, x, y[, w, h])drawImage
(img, sx, sy, sw, sh, dx, dy, dw, dh)Рисуем на канвасе картинку
fill
()Залить замкнутый контур
fillRect
(x, y, h, w)Залить замкнутый контур, прямоугольник
ctx.fillRect(0, 0, 100, 100);
fillText
(text, x, y[, maxWidth])Рисует текст
ctx.fillText('Hello', 0, 0);
getImageData
(sx, sy, sw, sh)Возвращает маcсив пикселов холста
isPointInPath
(x, y)Проверяет, попадает ли точка в пределы текущего контура
lineTo
(x, y)Рисуем линию от текущего положения маркера, до указанной
ctx.lineTo(0, 0);
measureText
(text)Вычисляет ширину текста, которую он займет при рисовании с текущим значением свойства и возвращает TextMetrics
moveTo
(x, y)Перемещаем маркер на указанную позицию
ctx.moveTo(0, 0);
putImageData
(imagedata, dx, dy[, sx, sy, sw, sh])Устанавливает отдельные писксели
quadraticCurveTo
(cpx, cpy, x, y)Рисование кривых Безье 2 порядка
rect
(x, y, w, h)Рисование прямоугольника
ctx.rect(100, 100, 30, 30);
restore
()Востоанавливаем предыдущее сохраненное состояние контекста
rotate
(angle)Поворачивает матрицу рисования на указанный угол
save
()Сохраняем копию текущего состояния
scale
(sx, sy)Изменение масштаба матрицы рисования
setTransform
(a, b, c, d, e, f)Задаем матрицу преобразования
stroke
()Отрисовать все
ctx.stroke();
strokeRect
(x, y, w, h)Отрисовка прямоугоника без заливки
ctx.fillRect(0, 0, 100, 100);
strokeText
(text, x, y[, maxWidth])Рисует контуры текста
transform
(a, b, c, d, e, f)translate
(x, y)Переносим начало позиции координат на указанную точку