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
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¶
Ссылки¶
- Свойство
globalCompositeOperation
MDN (рус.)