Свойство globalCompositeOperationHTML canvas
Справочное руководство по HTML canvas
Примеры
Используйте разные значения 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);
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 задает или возвращает, как исходное (новое) изображение рисуется на целевом (существующем) изображении.
исходное изображение =Рисунок, который вы собираетесь разместить на холсте.
изображение назначения =Рисунок, который вы уже разместили на холсте.
| Значение по умолчанию: | source-over |
|---|---|
| Синтаксис JavaScript: | context.globalCompositeOperation="source-in"; |
Значения свойств
| Значение | Описание |
|---|---|
| source-over | По умолчанию. Наизображении назначенияотображатьисходное изображение.。 |
| source-atop | InПоверх целевого изображенияотобразитьисходное изображение.。Часть исходного изображения,расположеннаяза пределами целевого изображения,не видна. |
| source-in | ВВ целевом изображенииотобразитьисходное изображение.. Толькоцелевое изображениеВнутриисходного изображениябудет отображаться часть,целевое изображениепрозрачно. |
| source-out | ВВне целевого изображенияотображатьисходное изображение.. Толькоцелевое изображениевнеисходного изображениячасть будет отображаться,целевое изображениепрозрачно. |
| destination-over | ВНа исходном изображенииотобразитьцелевое изображение.。 |
| destination-atop | ВПоверх исходного изображенияотобразитьцелевое изображение.。Часть целевого изображениянаходящаясяза пределами исходного изображенияне видно. |
| destination-in | ВВ исходном изображенииотобразитьцелевое изображение.. Толькоисходное изображениевнутрицелевого изображениячасть будет отображаться,исходное изображениепрозрачно. |
| destination-out | Ввне исходного изображенияотображатьцелевое изображение.. Толькоисходное изображениевнецелевого изображениячасть будет отображена,исходное изображениепрозрачно. |
| lighter | Отобразитьисходное изображение + и целевое изображение.。 |
| copy | Отобразитьисходное изображение.. Игнорироватьцелевое изображение.。 |
| xor | Используя операцию XOR,исходное изображениеии целевое изображениеобъединяются. |
Справочное руководство по HTML canvas Другие расширения