Detaillierte Einführung in das globalCompositeOperation-Attribut in HTML5

Der Inhalt dieses Artikels befasst sich mit der Verwendung von Hintergrund-Orgin in CSS3 (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Das Standardwertattribut von globalCompositeOperation ist source-over

1 Source-over und die Quelle liegen über dem Ziel

context.fillStyle = 'aqua';
context.fillRect(50,50,100,100);//目标图形
context.globalCompositeOperation = 'source-over';
context.fillStyle = 'antiquewhite';
context.fillRect(100,100,100,100);//源图形

Die obige Grafik ist das Ziel und die untere Grafik ist die Quelle

2. Ziel-über-Ziel ist auf der Quelle

3. Quelle-oben wird die Quelle darüber zeichnen das Ziel, aber im überlappenden Bereich Beide oben genannten sind undurchsichtig, das an anderen Positionen gezeichnete Ziel ist undurchsichtig und die Quelle ist transparent

context.fillStyle = 'aqua';
context.fillRect(50,50,100,100);
context.globalCompositeOperation = 'source-atop';
context.fillStyle = 'antiquewhite';
context.fillRect(100,100,100,100);

Die Auswirkungen von „destination-atop“ und „source-atop“ sind entgegengesetzt, beide sind im überlappenden Teil undurchsichtig, aber die Quelle ist an anderen Positionen undurchsichtig und das Ziel ist transparent

5. Nur die Quelle wird im überlappenden Teil von Quelle-Eingang und Ziel angezeigt, und andere Teile werden transparent

6. Ziel-Eingang zeigt das Ziel nur an, wenn sich Quelle und Ziel überlappen, und alles andere wird transparent

7. Source-out zeigt nur den nicht überlappenden Teil der Quelle an, andere Teile werden nicht angezeigt.

8. Destination-out zeigt nur den nicht überlappenden Teil des Ziels an , und andere Teile werden nicht angezeigt

9 Der Wert von heller hat nichts mit der Reihenfolge zu tun, wenn sich die beiden Farbwerte addieren und der maximale Farbwert 255 ist Der Wert ist weiß

10. Kopieren kopiert nur die Quelle

11 Kopiert nur die nicht überlappenden Teile der Quelle und des Ziels und die überlappenden Teile sind transparent

Verwandte Empfehlungen:

Detaillierte Einführung in das Download-Attribut in HTML5

Detaillierte Einführung in die Verwendung des flexiblen H5-Box-Layouts (Eigenschaften des übergeordneten Containers)

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das globalCompositeOperation-Attribut in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!