Свойство globalCompositeOperation HTML canvas
Определение и использование
globalCompositeOperation Настройки свойств или возврат того, как рисовать одно изображение (новое) на изображение (существующее).
Исходное изображение = рисование, которое вы планируете разместить на канвасе.
Целевое изображение = рисование, которое вы уже разместили на канвасе.
Пример
Пример 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);
Пример 2
Все значения свойства globalCompositeOperation:
Синтаксис
context.globalCompositeOperation="source-in";
Значение свойства
| Значение | Описание |
|---|---|
| source-over | По умолчанию. Отображение исходного изображения на целевом изображении. |
| source-atop | Отображение исходного изображения над целевым изображением. Часть исходного изображения, находящаяся за пределами целевого изображения, не видна. |
| source-in | Отображение исходного изображения в целевом изображении. Отображается только часть исходного изображения в пределах целевого изображения, целевое изображение прозрачное. |
| source-out | Отображение исходного изображения за пределами целевого изображения. Отображается только часть исходного изображения за пределами целевого изображения, целевое изображение прозрачное. |
| destination-over | Отображение целевого изображения над исходным изображением. |
| destination-atop | Отображение целевого изображения над исходным изображением. Часть целевого изображения вне исходного изображения не будет отображаться. |
| destination-in | Отображение целевого изображения в исходном изображении. Только часть целевого изображения в исходном изображении будет отображаться, исходное изображение будет прозрачным. |
| destination-out | Отображение целевого изображения вне исходного изображения. Только часть целевого изображения вне исходного изображения будет отображаться, исходное изображение будет прозрачным. |
| lighter | Отображение исходного изображения + целевого изображения. |
| copy | Отображение исходного изображения. Игнорирование целевого изображения. |
| xor | Использование операции исключения для комбинирования исходного изображения с целевым изображением. |
Технические детали
| Значение по умолчанию: | source-over |
|---|
Поддержка браузерами
Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Комментарий:Интернет-Explorer 8 и более ранние версии не поддерживают элемент <canvas>.
