Свойство globalCompositeOperation для Canvas

Руководство по Canvas

Определение и использование

globalCompositeOperation Настройка свойств или возврат способа, как рисовать одно изображение из источника (нового) на изображение целевого (существующего).

Исходное изображение = рисование, которое вы планируете разместить на холсте.

Целевое изображение = рисование, которое вы уже разместили на холсте.

Пример

Пример 1

Использование различных значений globalCompositeOperation для рисования прямоугольников. Красный прямоугольник - это целевое изображение. Синий прямоугольник - это исходное изображение:

　　　　　source-over destination-over

Ваш браузер не поддерживает тег canvas.

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 Показывать целевое изображение вне исходного изображения. Только часть целевого изображения вне исходного изображения будет видна, исходное изображение прозрачное.
светлее Показывать исходное изображение + целевое изображение.
копировать Показывать исходное изображение. Игнорировать целевое изображение.
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>.

Руководство по Canvas