html5-canvas
compositing

Teken achter bestaande vormen met "bestemming-over"

context.globalCompositeOperation = "destination-over"

"bestemming-over" compositie plaatst nieuwe tekening onder bestaande tekeningen .

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

Wis bestaande vormen met "bestemming uit"

context.globalCompositeOperation = "destination-out"

"bestemming-uit" compositie maakt gebruik van nieuwe vormen om bestaande tekeningen te wissen.

De nieuwe vorm wordt niet echt getekend - het wordt alleen gebruikt als een "cookie-cutter" om bestaande pixels te wissen.

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

Standaard samenstelling: nieuwe vormen worden over bestaande vormen getekend

context.globalCompositeOperation = "source-over"

"source-over" compositing [standaard] , plaatst alle nieuwe tekeningen over bestaande tekeningen.

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

Clip afbeeldingen in vormen met "bestemming"

context.globalCompositeOperation = "destination-in"

"bestemming-in" compositie knipt bestaande tekeningen in een nieuwe vorm.

Opmerking: elk deel van de bestaande tekening dat buiten de nieuwe tekening valt, wordt gewist.

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

Clip afbeeldingen in vormen met "source-in"

context.globalCompositeOperation = "source-in";

source-in compositing knipt nieuwe tekeningen binnen een bestaande vorm.

Opmerking: elk deel van de nieuwe tekening dat buiten de bestaande tekening valt, wordt gewist.

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

Binnenschaduwen met "bron boven"

context.globalCompositeOperation = 'source-atop'

source-atop compositing clips nieuwe afbeelding binnen een bestaande vorm.

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

Afbeelding omkeren of negeren met "verschil"

Render een witte rechthoek over een afbeelding met de composietbewerking

ctx.globalCompositeOperation = 'difference';

De hoeveelheid effect kan worden geregeld met de alpha-instelling

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

Zwart en Wit met "kleur"

Verwijder kleur uit een afbeelding via

ctx.globalCompositeOperation = 'color';

De hoeveelheid effect kan worden geregeld met de alpha-instelling

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

Verhoog het kleurcontrast met "verzadiging"

Verhoog het verzadigingsniveau van een afbeelding met

ctx.globalCompositeOperation = 'saturation';

De hoeveelheid effect kan worden geregeld met de alfa-instelling of de hoeveelheid verzadiging in de opvullaag

// 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 met "helderheid"

Maak een gekleurde sepia FX met

ctx.globalCompositeOperation = 'luminosity';

In dit geval wordt de sepia-kleur eerst de afbeelding weergegeven.

De hoeveelheid effect kan worden geregeld met de alfa-instelling of de hoeveelheid verzadiging in de opvullaag

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

Verander de dekking met "globalAlpha"

context.globalAlpha=0.50

U kunt de dekking van nieuwe tekeningen wijzigen door de globalAlpha te stellen op een waarde tussen 0,00 (volledig transparant) en 1,00 (volledig ondoorzichtig).

De standaard globalAlpha is 1,00 (volledig ondoorzichtig).

Bestaande tekeningen worden niet beïnvloed door 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);