пример
Рисование прямоугольников с помощью двух различных значений globalCompositeOperation. Красные прямоугольники destination images . Синие прямоугольники source images :
источник-над
назначения, более
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 | 4,0 | 9,0 | 3,6 | 4,0 | 10,1 |
Определение и использование
В globalCompositeOperation наборов свойств или возвращается , как источник (new) изображения нарисованы на место назначения (existing) изображение.
исходное изображение = чертежи вы собираетесь поместить на холст.
конечное изображение = чертежи, которые уже размещены на холст.
| Значение по умолчанию: | источник-над |
|---|---|
| Синтаксис JavaScript: | context .globalCompositeOperation="source-in"; |
Значения свойств
| Стоимость | Описание | Сыграй |
|---|---|---|
| source-over | По умолчанию. Отображает изображение источника на изображении назначения | Сыграй " |
| source-atop | Отображает исходное изображение в верхней части целевого изображения. Часть source image , которая находится за пределами destination image не отображается | Сыграй " |
| source-in | Отображает исходное изображение , чтобы в конечном изображении. Только часть source image , которая находится внутри destination image отображается, и destination image является прозрачным | Сыграй " |
| source-out | Отображает исходное изображение из конечного изображения. Только часть source image , которая находится за пределами destination image отображается, и destination image является прозрачным | Сыграй " |
| destination-over | Отображает изображение назначения по исходному изображению | Сыграй " |
| destination-atop | Отображает изображение назначения в верхней части исходного изображения. Часть destination image , что находится за пределами source image не отображается | Сыграй " |
| destination-in | Отображает изображение назначения в к исходному изображению. Только часть destination image , которая находится внутри source image показана, а source image является прозрачным | Сыграй " |
| destination-out | Отображает изображение назначения из исходного изображения. Только часть destination image , которая находится за пределами source image показана, а source image является прозрачным | Сыграй " |
| lighter | Отображает исходное изображение + изображение назначения | Сыграй " |
| copy | Отображает исходное изображение. Конечное изображение игнорируется | Сыграй " |
| xor | Исходное изображение комбинируется с помощью исключающего ИЛИ с изображением назначения | Сыграй " |
<Холст объекта