Was sind die Canvas-Syntheseeffekte?

Canvas-Syntheseeffekte umfassen Quelle-über, Quelle-ein, Quelle-aus, Quelle-oben, Ziel-über, Ziel-ein, Ziel-aus, Ziel-oben, Feuerzeug, Kopieren usw. Detaillierte Einführung: 1. Source-over, der Standardsynthesemodus, das neu gezeichnete Bild wird über das vorhandene Bild gelegt 2. Source-in usw.

Die Betriebsumgebung dieses Tutorials: Windows-System, Dell G3-Computer.

Canvas ist eine Zeichen-API in HTML5. Sie bietet umfangreiche Zeichenfunktionen, einschließlich grafischer Zeichnung, Bildverarbeitung und Syntheseeffekte. In Canvas bezieht sich der Kompositionseffekt auf das Überlagern mehrerer Bilder mithilfe verschiedener Kompositionsmodi beim Zeichnen von Bildern, wodurch unterschiedliche visuelle Effekte erzeugt werden. Im Folgenden werden einige gängige Canvas-Syntheseeffekte vorgestellt.

1. Source-Over: Dies ist der Standard-Kompositionsmodus. Das neu gezeichnete Bild wird über das vorhandene Bild gelegt.

2. Source-In: Nur die überlappenden Teile des neu gezeichneten Bildes und des vorhandenen Bildes bleiben erhalten, andere Teile werden transparent gemacht.

3. Source-Out: Nur die Teile des neu gezeichneten Bildes, die sich nicht mit dem vorhandenen Bild überschneiden, werden beibehalten, andere Teile werden transparent gemacht.

4. Quelle oben: Das neu gezeichnete Bild wird über das vorhandene Bild gelegt, aber nur der Teil, der das vorhandene Bild überlappt, bleibt erhalten und die anderen Teile werden transparent gemacht.

5. Ziel-über: Das neu gezeichnete Bild wird unter dem vorhandenen Bild platziert.

6. Ziel-in: Nur die Teile des vorhandenen Bildes, die sich mit dem neu gezeichneten Bild überschneiden, bleiben erhalten, andere Teile werden transparent gemacht.

7. Zielausgang: Nur die Teile des vorhandenen Bildes, die sich nicht mit dem neu gezeichneten Bild überschneiden, werden beibehalten, andere Teile werden transparent gemacht.

8. Ziel oben: Das vorhandene Bild wird unter dem neu gezeichneten Bild platziert, aber nur der Teil, der das neu gezeichnete Bild überlappt, wird beibehalten und andere Teile werden transparent gemacht.

9. Heller: Die Farben des neu gezeichneten Bildes und des vorhandenen Bildes werden addiert, um eine hellere Farbe zu erzeugen.

10. Kopieren: Das neu gezeichnete Bild ersetzt das vorhandene Bild vollständig.

11. xor: Die Farbe des neu gezeichneten Bildes und des vorhandenen Bildes werden XOR-verknüpft, um Spezialeffekte zu erzeugen.

Zusätzlich zu den oben genannten Kompositionsmodi bietet Canvas auch einige globale Kompositionsoperationen, die über die Eigenschaft globalCompositeOperation festgelegt werden können. Zu den gängigen globalen Kompositionsoperationen gehören:

1. Multiplizieren: Das neu gezeichnete Bild wird mit der Farbe des vorhandenen Bildes multipliziert, um eine dunklere Farbe zu erzeugen.

2. Bildschirm: Das neu gezeichnete Bild wird mit der Farbe des vorhandenen Bildes gemischt, um eine hellere Farbe zu erzeugen.

3. Überlagerung: Passen Sie die Farbe des neu gezeichneten Bildes basierend auf der Helligkeit und dem Kontrast des vorhandenen Bildes an.

4. Abdunkeln: Vergleichen Sie die Farbe des neu gezeichneten Bildes mit der Farbe des vorhandenen Bildes und behalten Sie die dunklere Farbe bei.

5. Aufhellen: Vergleichen Sie die Farbe des neu gezeichneten Bildes mit der Farbe des vorhandenen Bildes und behalten Sie dabei die hellere Farbe bei.

Durch die Verwendung dieser Kompositionseffekte können wir in Canvas verschiedene interessante visuelle Effekte erzielen, wie z. B. Bildüberblendungen, Transparenzeffekte, Schatteneffekte usw. In praktischen Anwendungen können wir je nach Bedarf den geeigneten Synthesemodus auswählen, um den gewünschten Effekt zu erzielen. Gleichzeitig können wir durch die Kombination mehrerer Bilder und zusammengesetzte Effekte auch komplexere und einzigartigere Grafikeffekte erzeugen.

Das obige ist der detaillierte Inhalt vonWas sind die Canvas-Syntheseeffekte?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!