Gibt es eine Möglichkeit, mehrere Zeichenoperationen in einem 2D-Canvas-Rendering-Kontext so zu kombinieren, dass sie ihre kombiniert result wird auf den vorherigen Inhalt der Zeichenfläche komponiert, im Gegensatz zu jeder Zeichenoperation, die für sich komponiert wird?

Eine Anwendung: Ich möchte eine durchscheinende Linie mit einer Pfeilspitze zeichnen und eine erhöhte Deckkraft in den Bereichen vermeiden, in denen sich die Linie und die Pfeilspitze überlappen.

Viele andere Rendering-Modelle unterstützen solche Funktionen. SVG hat ein Gruppenopazität -Einstellung, beschrieben in Abschnitt 14.5. DasPDF Referenz beschreibt “Transparenzgruppen” in Abschnitt 7.3. In vielen Grafikanwendungen kann ein Benutzer Ebenen erstellen und diese dann als Ganzes zusammenstellen.

Ich schätze, ich könnte eine zweite unsichtbare Leinwand einrichten, die als Off-Screen-Bild verwendet wird, meinen Inhalt darauf rendern und dann @ verwendeglobalAlpha, um das Ergebnis mit der gewünschten Transluzenz auf der Hauptleinwand zusammenzustellen. Aber ich hoffe, dass es eine elegantere Lösung gibt, auch wenn ich sie in den Dokumenten bisher nicht gefunden habe.

Mischen Sie mehrere Pfade in CanvasRenderingContext2D, um sie als Gruppe zu füllen und zu zeichnen. hat anscheinend ein ähnliches Ziel vor Augen. Aber der Fokus scheint darin zu liegen, wie man boolesche Operationen auf Pfaden ausführt, wahrscheinlich auf dem Weg clipper macht es. Für diesen Beitrag hier bin ich also nicht daran interessiert, die Pfade im Vorfeld zu manipulieren. Ich möchte in der Lage sein, jeden Strich wie gewohnt zu zeichnen.