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