Свойство globalCompositeOperation устанавливает/возвращает то, как исходное (новое) изображение нарисовано на целевом (существующем) изображении.
исходное изображение = рисунок, который вы планируете поместить на холсте.
целевое изображение = рисунок, который уже размещен на холсте.
| Значение по умолчанию: | source-over |
| JavaScript синтаксис: | context.globalCompositeOperation="source-in"; |
Возможные значения
| Значение | Описание |
|---|---|
| source-over | Значение по умолчанию. Исходное изображение накрывает целевое |
| source-atop | Исходное изображение накладывается поверх целевого. При этом часть исходного изображения, которая выходит за границы целевого изображения, не отображается |
| source-in | Исходное изображение отображается внутри целевого изображения. При этом отображается только та часть исходного изображения, которая находится в границах целевого изображения. Само целевое изображение становится прозрачным |
| source-out | Исходное изображение отображается вне границ целевого изображения. При этом отображается только та часть исходного изображения, которая находится за пределами целевого изображения. Само целевое изображение становится прозрачным |
| destination-over | Целевое изображение накрывает исходное |
| destination-atop | Целевое изображение накладывается поверх исходного. При этом часть целевого изображения, которая выходит за границы исходного изображения, не отображается |
| destination-in | Целевое изображение отображается внутри исходного изображения. При этом отображается только та часть целевого изображения, которая находится в границах исходного изображения. Само исходное изображение становится прозрачным |
| destination-out | Целевое изображение отображается вне границ исходного изображения. При этом отображается только та часть целевого изображения, которая находится за пределами исходного изображения. Само исходное изображение становится прозрачным |
| lighter | Отображает исходное изображение + целевое изображение |
| copy | Отображает исходное изображение. Целевое изображение игнорируется |
| xor | Исходное изображение комбинируется с целевым используя операцию исключающего ИЛИ |
Пример использования
Пример №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:
