Suche…
Mit "destination-over" hinter bestehende Formen zeichnen
context.globalCompositeOperation = "destination-over"
Beim "destination-over" -Compositing wird eine neue Zeichnung unter den vorhandenen Zeichnungen platziert .
context.drawImage(rainy,0,0);
context.globalCompositeOperation='destination-over'; // sunny UNDER rainy
context.drawImage(sunny,0,0);
Vorhandene Shapes mit "destination-out" löschen
context.globalCompositeOperation = "destination-out"
"Destination-Out" Compositing verwendet neue Formen, um vorhandene Zeichnungen zu löschen.
Die neue Form wird nicht wirklich gezeichnet - sie wird nur als "Ausstecher" verwendet, um vorhandene Pixel zu löschen.
context.drawImage(apple,0,0);
context.globalCompositeOperation = 'destination-out'; // bitemark erases
context.drawImage(bitemark,100,40);
Standardzusammenstellung: Neue Formen werden über vorhandene Formen gezeichnet
context.globalCompositeOperation = "source-over"
Beim "source-over" -Compositing [Standard] werden alle neuen Zeichnungen über vorhandenen Zeichnungen platziert.
context.globalCompositeOperation='source-over'; // the default
context.drawImage(background,0,0);
context.drawImage(parachuter,0,0);
Bilder in Formen mit "destination-in" ausschneiden
context.globalCompositeOperation = "destination-in"
Beim "Ziel-in" -Compositing werden vorhandene Zeichnungen in eine neue Form eingefügt.
Hinweis: Alle Teile der vorhandenen Zeichnung, die außerhalb der neuen Zeichnung liegen, werden gelöscht.
context.drawImage(picture,0,0);
context.globalCompositeOperation='destination-in'; // picture clipped inside oval
context.drawImage(oval,0,0);
Bilder innerhalb von Formen mit "source-in" ausschneiden
context.globalCompositeOperation = "source-in";
source-in Compositing werden neue Zeichnungen in eine vorhandene Form eingefügt.
Hinweis: Alle Teile der neuen Zeichnung, die außerhalb der vorhandenen Zeichnung liegen, werden gelöscht.
context.drawImage(oval,0,0);
context.globalCompositeOperation='source-in'; // picture clipped inside oval
context.drawImage(picture,0,0);
Innere Schatten mit "Quelle auf"
context.globalCompositeOperation = 'source-atop'
source-atop neue Bild in eine vorhandene Form eingefügt.
// 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);
Bild mit "Unterschied" invertieren oder negieren
Rendern Sie mit dem Composite-Vorgang ein weißes Rechteck über einem Bild
ctx.globalCompositeOperation = 'difference';
Die Stärke des Effekts kann mit der Alpha-Einstellung gesteuert werden
// 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);
Schwarzweiß mit "Farbe"
Farbe aus einem Bild entfernen über
ctx.globalCompositeOperation = 'color';
Die Stärke des Effekts kann mit der Alpha-Einstellung gesteuert werden
// 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);
Erhöhen Sie den Farbkontrast mit "Sättigung"
Erhöhen Sie den Sättigungsgrad eines Bildes mit
ctx.globalCompositeOperation = 'saturation';
Die Stärke des Effekts kann mit der Alpha-Einstellung oder der Sättigung der Füllüberlagerung gesteuert werden
// 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 mit "Leuchtkraft"
Erstellen Sie einen farbigen Sepia-FX mit
ctx.globalCompositeOperation = 'luminosity';
In diesem Fall wird die Sepia-Farbe zuerst im Bild dargestellt.
Die Stärke des Effekts kann mit der Alpha-Einstellung oder der Sättigung der Füllüberlagerung gesteuert werden
// 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);
Deckkraft mit "globalAlpha" ändern
context.globalAlpha=0.50
Sie können die Deckkraft neuer Zeichnungen ändern, indem globalAlpha für globalAlpha einen Wert zwischen 0,00 (vollständig transparent) und 1,00 (vollständig undurchsichtig) globalAlpha .
Der Standardwert für globalAlpha ist 1,00 (vollständig undurchsichtig).
Bestehende Zeichnungen sind von globalAlpha nicht betroffen.
// 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);