html5-canvas
compositing

Rita bakom befintliga former med "destination-over"

context.globalCompositeOperation = "destination-over"

"destination-over" -kompositionering placerar ny ritning under befintliga ritningar .

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

Radera befintliga former med "destination-out"

context.globalCompositeOperation = "destination-out"

"destination-out" -kompositionering använder nya former för att radera befintliga ritningar.

Den nya formen ritas faktiskt inte - den används bara som en "cookie-cutter" för att radera befintliga pixlar.

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

Standardkomposition: Nya former ritas över befintliga former

context.globalCompositeOperation = "source-over"

"source-over" -komposition [standard] , placerar alla nya ritningar över alla befintliga ritningar.

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

Klipp bilder inuti former med "destination-in"

context.globalCompositeOperation = "destination-in"

"destination-in" -kompositionering klipp befintliga ritningar i en ny form.

Obs: Alla delar av den befintliga ritningen som faller utanför den nya ritningen raderas.

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

Klipp bilder inuti former med "source-in"

context.globalCompositeOperation = "source-in";

source-in compositing klipp nya ritningar i en befintlig form.

Obs: Alla delar av den nya ritningen som faller utanför den befintliga ritningen raderas.

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

Inre skuggor med "source-atop"

context.globalCompositeOperation = 'source-atop'

source-atop compositing klipp ny bild i en befintlig form.

// 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);

Invertera eller negera bild med "skillnad"

Ge en vit rektangel över en bild med den sammansatta operationen

ctx.globalCompositeOperation = 'difference';

Mängden effekt kan kontrolleras med alfainställningen

// 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);

Svartvitt med "färg"

Ta bort färg från en bild via

ctx.globalCompositeOperation = 'color';

Mängden effekt kan kontrolleras med alfainställningen

// 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);

Öka färgkontrasten med "mättnad"

Öka bildens mättnadsnivå med

ctx.globalCompositeOperation = 'saturation';

Storleken på effekten kan kontrolleras med alfainställningen eller mängden mättnad i fyllningsöverlagringen

// 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 med "ljusstyrka"

Skapa en färgad sepia FX med

ctx.globalCompositeOperation = 'luminosity';

I detta fall återges sepiafärgen först bilden.

Storleken på effekten kan kontrolleras med alfainställningen eller mängden mättnad i fyllningsöverlagringen

// 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);

Ändra opacitet med "globalAlpha"

context.globalAlpha=0.50

Du kan ändra opaciteten för nya ritningar genom att ställa globalAlpha till ett värde mellan 0,00 (helt transparent) och 1,00 (helt ogenomskinligt).

Standardinställningen globalAlpha är 1,00 (helt ogenomskinlig).

Befintliga ritningar påverkas inte av 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);