html5-canvas
Compositing

Нарисуйте за существующими фигурами с помощью функции "destination-over"

context.globalCompositeOperation = "destination-over"

Композиция «Назначение поверх» помещает новый чертеж в существующие чертежи .

context.drawImage(rainy,0,0);
context.globalCompositeOperation='destination-over';  // sunny UNDER rainy
context.drawImage(sunny,0,0);

Стирание существующих фигур с помощью функции "destination-out"

context.globalCompositeOperation = "destination-out"

Композиция «destination-out» использует новые формы для стирания существующих чертежей.

Новая форма на самом деле не нарисована - она ​​просто используется как «куки-резак» для стирания существующих пикселей.

context.drawImage(apple,0,0);
context.globalCompositeOperation = 'destination-out';   // bitemark erases
context.drawImage(bitemark,100,40);

Компоновка по умолчанию: новые формы нарисованы поверх существующих фигур

context.globalCompositeOperation = "source-over"

компоновка «исходный текст» [по умолчанию] , размещает все новые чертежи поверх любых существующих чертежей.

context.globalCompositeOperation='source-over';  // the default
context.drawImage(background,0,0);
context.drawImage(parachuter,0,0);

Закрепите изображения внутри фигур с помощью «места назначения»,

context.globalCompositeOperation = "destination-in"

«destination-in» компонует клипы существующих рисунков внутри новой формы.

Примечание. Любая часть существующего чертежа, которая выходит за пределы нового чертежа, удаляется.

context.drawImage(picture,0,0);
context.globalCompositeOperation='destination-in';  // picture clipped inside oval
context.drawImage(oval,0,0);

Закрепите изображения внутри фигур с помощью «источника»,

context.globalCompositeOperation = "source-in";

source-in компоновке создает новые рисунки внутри существующей формы.

Примечание. Любая часть нового чертежа, выходящего за пределы существующего чертежа, удаляется.

context.drawImage(oval,0,0);
context.globalCompositeOperation='source-in';  // picture clipped inside oval
context.drawImage(picture,0,0);

Внутренние тени с "source-atop"

context.globalCompositeOperation = 'source-atop'

source-atop compositing создает новое изображение внутри существующей формы.

// gold filled rect
ctx.fillStyle='gold';
ctx.fillRect(100,100,100,75);
// shadow
ctx.shadowColor='black';
ctx.shadowBlur=10;
// restrict new draw to cover existing pixels
ctx.globalCompositeOperation='source-atop';
// shadowed stroke
// "source-atop" clips off the undesired outer shadow
ctx.strokeRect(100,100,100,75);
ctx.strokeRect(100,100,100,75);

Обратить или отменить изображение с помощью "разницы"

Отобразить белый прямоугольник над изображением с композитной операцией

ctx.globalCompositeOperation = 'difference';

Размер эффекта можно контролировать с помощью альфа-настройки

// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);

// set the composite operation
ctx.globalCompositeOperation='difference';
ctx.fillStyle = "white";
ctx.globalAlpha = alpha;  // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);

Черно-белый с "цветным"

Удалить цвет изображения

ctx.globalCompositeOperation = 'color';

Размер эффекта можно контролировать с помощью альфа-настройки

// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);

// set the composite operation
ctx.globalCompositeOperation='color';
ctx.fillStyle = "white";
ctx.globalAlpha = alpha;  // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);

Увеличьте цветовой контраст с "насыщенностью"

Увеличьте уровень насыщенности изображения с помощью

ctx.globalCompositeOperation = 'saturation';

Размер эффекта можно контролировать с помощью альфа-настройки или количества насыщения в наполнителе заполнения

// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);

// set the composite operation
ctx.globalCompositeOperation ='saturation';
ctx.fillStyle = "red";
ctx.globalAlpha = alpha;  // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);

Sepia FX с "яркостью"

Создайте цветную сепию FX с

ctx.globalCompositeOperation = 'luminosity';

В этом случае цвет сепии визуализируется первым изображением.

Размер эффекта можно контролировать с помощью альфа-настройки или количества насыщения в наполнителе заполнения

// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.fillStyle = "#F80";  // the color of the sepia FX
ctx.fillRect(0, 0, image.width, image.height);

// set the composite operation
ctx.globalCompositeOperation ='luminosity';

ctx.globalAlpha = alpha;  // alpha 0 = no effect 1 = full effect
ctx.drawImage(image, 0, 0);

Измените непрозрачность с помощью "globalAlpha"

context.globalAlpha=0.50

Вы можете изменить непрозрачность новых чертежей, установив globalAlpha на значение от 0,00 (полностью прозрачное) до 1,00 (полностью непрозрачное).

Значение по умолчанию globalAlpha равно 1.00 (полностью непрозрачно).

globalAlpha не влияет на существующие чертежи.

// draw an opaque rectangle
context.fillRect(10,10,50,50);

// change alpha to 50% -- all new drawings will have 50% opacity
context.globalAlpha=0.50;

// draw a semi-transparent rectangle
context.fillRect(100,10,50,50);