Wie kann ich INSIDE eine Form in HTML5-Canvas schneiden?
Ich habe eine Anzahl von Beispielen gefunden, um die außerhalb Region eines Bogens zu beschneiden (zB: Dieses Beispiel ). Ich kann nicht herausfinden, wie man stattdessen in die Bogenform schneidet.
Hier ist ein Beispiel, wie ich gerade die äußere Region beschneide, was im Wesentlichen das Gegenteil von dem ist, was ich will:
%Vor%3 Antworten
Verfügbare Optionen
Für unregelmäßige Formen können Sie zwei Techniken verwenden:
- Zusammengesetzter Modus
- Beschneiden
Meiner Meinung nach ist es besser, den aktuellen Schnittmodus oder den zusammengesetzten Modus destination-out zu verwenden.
Wie MarkE sagt, ist xor ebenfalls verfügbar, aber xoder invertiert nur Alpha-Pixel und entfernt nicht die RGB-Pixel. Dies funktioniert für solide Bilder ohne Transparenz, aber wo Sie bereits vorhandene Pixel mit Transparenz haben, können diese den gegenteiligen Effekt haben (sichtbar werden) oder wenn Sie später den xor-Modus verwenden, wird der "ausgeschnittene" Bereich erneut angezeigt.
Clipping
Durch Verwendung von Clipping können Sie einfach clearRect verwenden, um den durch den Pfad definierten Bereich zu löschen.
Beispiel:
%Vor%Quellbild : ein Bild mit teilweise halbtransparenten Pixeln und voll transparent, wo das Weiß vom Hintergrund durchkommt -
Ergebnis:
Wir haben ein Loch hineingestanzt und der Hintergrund zeigt sich:
Composite-Modus: Ziel-Ausgang
Im Composite-Modus löscht destination-out die Pixel wie beim Clipping:
ONLINE-DEMO FÜR DEN COMPOSITE-MODUS :
Ergebnis:
Das gleiche gilt für Clipping, wenn destination-out die Pixel entfernt.
Zusammengesetzter Modus: xor
Verwenden Sie xor in diesem Fall, in dem transparente Pixel vorhanden sind ( siehe Online-Beispiel hier ):
Nur die Alpha-Werte wurden invertiert. Da wir keine festen Pixel haben, wird das Alpha nicht von 255 auf 0 ( 255 - 255 ) sondern 255 - actual value wechseln, was in diesem Modus zu nicht gelöschtem Hintergrund führt.
(Wenn Sie ein zweites Mal mit demselben Modus zeichnen, werden die "entfernten" Pixel wiederhergestellt, so dass dies auf andere Weise genutzt werden kann).
Sie können sicherlich mit der 'invertierten' Clipform Ihres Stils schneiden: zeichnen Sie zuerst die
Umriss, zeichnen Sie dann Ihren Beschneidungspfad - ohne beginPath -, dann schließen Sie den Pfad und clip.
Auf diese Weise ist die von Ihnen beschriebene Form ein "Loch" innerhalb des Bildschirms
Die Pfadfunktion muss einen geschlossenen Pfad beschreiben.
Eine Demo ist hier: Ссылка Wir können sehen, dass es sogar mit mehreren Formen funktioniert, vorausgesetzt, sie schneiden sich nicht.
Der Code sieht folgendermaßen aus:
%Vor%Anwendungsbeispiel: (zeichnet ein Bild mit einem umgekehrten Clip eines Kreises):
%Vor%Letzte Bemerkung: Sie können tatsächlich eine beliebige Basisform auswählen, von der subtrahiert werden soll.
Sie können context.globalCompositeOperation="xor" verwenden, um aus Ihrem vorhandenen Bild basierend auf einem Pfad oder einer Zeichnung zu entfernen.
Dieser Compositing-Modus "zieht die vorhandenen Pixel mithilfe einer beliebigen Zeichnung, die Sie nach dem Zusammenfügen verwendet haben," aus.
In diesem Fall wird das vorhandene Bild basierend auf Ihrem Bogen "nicht gezeichnet":
Hier ist Code und eine Geige: Ссылка
%Vor%