Context¶
Контекст канвас страницы
- class
Context
¶ -
-
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)¶ Переносим начало позиции координат на указанную точку
-