Перейти к содержанию

globalCompositeOperation

Свойство globalCompositeOperation устанавливает/возвращает то, как исходное (новое) изображение нарисовано на целевом (существующем) изображении.

исходное изображение = рисунок, который вы планируете поместить на холсте.

целевое изображение = рисунок, который уже размещен на холсте.

Синтаксис

context.globalCompositeOperation="source-in";

Значения

Значение по умолчанию: source-over

source-over
Значение по умолчанию. Исходное изображение накрывает целевое
source-atop
Исходное изображение накладывается поверх целевого. При этом часть исходного изображения, которая выходит за границы целевого изображения, не отображается
source-in
Исходное изображение отображается внутри целевого изображения. При этом отображается только та часть исходного изображения, которая находится в границах целевого изображения. Само целевое изображение становится прозрачным
source-out
Исходное изображение отображается вне границ целевого изображения. При этом отображается только та часть исходного изображения, которая находится за пределами целевого изображения. Само целевое изображение становится прозрачным
destination-over
Целевое изображение накрывает исходное
destination-atop
Целевое изображение накладывается поверх исходного. При этом часть целевого изображения, которая выходит за границы исходного изображения, не отображается
destination-in
Целевое изображение отображается внутри исходного изображения. При этом отображается только та часть целевого изображения, которая находится в границах исходного изображения. Само исходное изображение становится прозрачным
destination-out
Целевое изображение отображается вне границ исходного изображения. При этом отображается только та часть целевого изображения, которая находится за пределами исходного изображения. Само исходное изображение становится прозрачным
lighter
Отображает исходное изображение + целевое изображение
copy
Отображает исходное изображение. Целевое изображение игнорируется
xor
Исходное изображение комбинируется с целевым используя операцию исключающего ИЛИ
multiply
Пиксели верхнего слоя умножаются на соответствующий пиксель нижнего слоя.
screen
Пиксели инвертируются, умножаются и снова инвертируются.
overlay
Сочетание умножения и экрана. Темные части базового слоя становятся темнее, а светлые части становятся светлее.
darken
Сохраняет самые темные пиксели обоих слоев.
lighten
Сохраняет самые светлые пиксели обоих слоев.
color-dodge
Делит нижний слой на перевернутый верхний слой.
color-burn
Делит инвертированный нижний слой на верхний, а затем инвертирует результат.
hard-light
Комбинация умножения и экрана, как наложение, но с заменой верхнего и нижнего слоя.
soft-light
Более мягкая версия жесткого света. Чистый черный или белый не приводит к чистому черному или белому.
difference
Вычитает нижний слой из верхнего слоя или наоборот, чтобы всегда получать положительное значение.
exclusion
Как difference, но с более низким контрастом.
hue
Сохраняет яркость и цветность нижнего слоя, принимая оттенок верхнего слоя.
saturation
Сохраняет яркость и оттенок нижнего слоя, принимая цветность верхнего слоя.
color
Сохраняет яркость нижнего слоя, принимая оттенок и цветность верхнего слоя.
luminosity
Сохраняет оттенок и цветность нижнего слоя, принимая яркость верхнего слоя.

Спецификация

Примеры

Пример 1

Нарисуем прямоугольники используя два разных значения globalCompositeOperation. Красный прямоугольник — целевое изображение. Синий прямоугольник — исходное изображение:

source-over destination-over

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:

var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')

ctx.fillStyle = 'red'
ctx.fillRect(20, 20, 75, 50)
ctx.globalCompositeOperation = 'source-over'
ctx.fillStyle = 'blue'
ctx.fillRect(50, 50, 75, 50)

ctx.fillStyle = 'red'
ctx.fillRect(150, 20, 75, 50)
ctx.globalCompositeOperation = 'destination-over'
ctx.fillStyle = 'blue'
ctx.fillRect(180, 50, 75, 50)

Все значения свойства globalCompositeOperation:


Пример 2

Ссылки