html5-canvas
Compositing

Dessiner derrière des formes existantes avec "destination-over"

context.globalCompositeOperation = "destination-over"

"destination-over" compositing place le nouveau dessin sous les dessins existants .

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

Effacer les formes existantes avec "destination-out"

context.globalCompositeOperation = "destination-out"

Le compositing "destination-out" utilise de nouvelles formes pour effacer les dessins existants.

La nouvelle forme n’est pas réellement dessinée - elle est simplement utilisée comme un "cookie-cutter" pour effacer les pixels existants.

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

Composition par défaut: les nouvelles formes sont dessinées sur des formes existantes

context.globalCompositeOperation = "source-over"

"source-over" compositing [default] , place tous les nouveaux dessins sur les dessins existants.

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

Clip images à l'intérieur des formes avec "destination-in"

context.globalCompositeOperation = "destination-in"

"destination-in" composant des clips des dessins existants dans une nouvelle forme.

Remarque: toute partie du dessin existant qui ne fait pas partie du nouveau dessin est effacée.

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

Clip images à l'intérieur des formes avec "source-in"

context.globalCompositeOperation = "source-in";

source-in compositing clips de nouveaux dessins à l'intérieur d'une forme existante.

Remarque: toute partie du nouveau dessin qui ne fait pas partie du dessin existant est effacée.

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

Ombres intérieures avec "source-atop"

context.globalCompositeOperation = 'source-atop'

source-atop compositing clips nouvelle image dans une forme existante.

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

Inverser ou annuler l'image avec "différence"

Rendre un rectangle blanc sur une image avec l'opération composite

ctx.globalCompositeOperation = 'difference';

Le montant de l'effet peut être contrôlé avec le paramètre alpha

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

Noir et blanc avec "couleur"

Supprimer la couleur d'une image via

ctx.globalCompositeOperation = 'color';

Le montant de l'effet peut être contrôlé avec le paramètre alpha

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

Augmente le contraste des couleurs avec "saturation"

Augmente le niveau de saturation d’une image avec

ctx.globalCompositeOperation = 'saturation';

La quantité d'effet peut être contrôlée avec le paramètre alpha ou la quantité de saturation dans la couche de remplissage

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

Sépia FX avec "luminosité"

Créez un effet sépia coloré avec

ctx.globalCompositeOperation = 'luminosity';

Dans ce cas, la couleur sépia est rendue d'abord l'image.

La quantité d'effet peut être contrôlée avec le paramètre alpha ou la quantité de saturation dans la couche de remplissage

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

Changer l'opacité avec "globalAlpha"

context.globalAlpha=0.50

Vous pouvez modifier l'opacité des nouveaux dessins en définissant le paramètre globalAlpha sur une valeur comprise entre 0,00 (entièrement transparent) et 1,00 (totalement opaque).

Le globalAlpha par défaut est 1.00 (complètement opaque).

Les dessins existants ne sont pas affectés par 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);