Композиция включает в себя различные способы наложения одного изображения или элемента рисунка на другой. Существует несколько режимов композиции, которые определяют, как цвета двух объектов смешиваются при их наложении.
globalCompositeOperationСвойство globalCompositeOperation контекста рисования позволяет устанавливать режим композиции. Его значения определяют, как цвета рисуемого объекта будут смешиваться с цветами объектов, находящихся под ним.
globalCompositeOperation = 'value';Где value - одно из допустимых значений для режима композиции.
Примеры значений:
source-over |
Значение по умолчанию. Исходное изображение накрывает целевое |
source-atop |
Исходное изображение накладывается поверх целевого. При этом часть исходного изображения, которая выходит за границы целевого изображения, не отображается |
source-in |
Исходное изображение отображается внутри целевого изображения. При этом отображается только та часть исходного изображения, которая находится в границах целевого изображения. Само целевое изображение становится прозрачным |
source-out |
Исходное изображение отображается вне границ целевого изображения. При этом отображается только та часть исходного изображения, которая находится за пределами целевого изображения. Само целевое изображение становится прозрачным |
destination-over |
Целевое изображение накрывает исходное |
destination-atop |
Целевое изображение накладывается поверх исходного. |
destination-in |
Целевое изображение отображается внутри исходного изображения. При этом отображается только та часть целевого изображения, которая находится в границах исходного изображения. Само исходное изображение становится прозрачным |
destination-out |
Целевое изображение отображается вне границ исходного изображения. При этом отображается только та часть целевого изображения, которая находится за пределами исходного изображения. Само исходное изображение становится прозрачным |
lighter |
Отображает исходное изображение + целевое изображение |
copy |
Отображает исходное изображение. Целевое изображение игнорируется |
xor |
Исходное изображение комбинируется с целевым используя операцию исключающего ИЛИ |
source-over// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
// Применяем режим композиции
ctx.globalCompositeOperation = 'source-over';
// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);Результат:
source-atop// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
// Применяем режим композиции
ctx.globalCompositeOperation = 'source-atop';
// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);Результат:
source-in// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
// Применяем режим композиции
ctx.globalCompositeOperation = 'source-in';
// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);Результат:
source-out// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
// Применяем режим композиции
ctx.globalCompositeOperation = 'source-out';
// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);Результат:
destination-over// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
// Применяем режим композиции
ctx.globalCompositeOperation = 'destination-over';
// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);Результат:
destination-atop// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
// Применяем режим композиции
ctx.globalCompositeOperation = 'destination-atop';
// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);Результат:
destination-in// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
// Применяем режим композиции
ctx.globalCompositeOperation = 'destination-in';
// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);Результат:
destination-out// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
// Применяем режим композиции
ctx.globalCompositeOperation = 'destination-out';
// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);Результат:
lighter// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
// Применяем режим композиции
ctx.globalCompositeOperation = 'lighter';
// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);Результат:
copy// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
// Применяем режим композиции
ctx.globalCompositeOperation = 'copy';
// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);Результат:
xor// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
// Применяем режим композиции
ctx.globalCompositeOperation = 'xor';
// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);Результат: