CanvasRenderingContext2D: filter-Eigenschaft
Die CanvasRenderingContext2D.filter
-Eigenschaft der Canvas 2D API ermöglicht Filtereffekte wie Weichzeichnen und Graustufen. Sie ist der CSS-filter
-Eigenschaft ähnlich und akzeptiert die gleichen Werte.
Wert
Die filter
-Eigenschaft akzeptiert einen Wert von "none"
oder eine oder mehrere der folgenden Filterfunktionen in einem String.
url()
-
Eine CSS
url()
. Akzeptiert jede URL, die zu einem SVG-Filterelement aufgelöst wird. Dies kann die ID eines Elements, ein Pfad zu einer externen XML-Datei oder sogar ein in Daten kodierter SVG-Wert sein. blur()
-
Eine CSS
<length>
. Wendet einen Gaußschen Weichzeichner auf die Zeichnung an. Sie definiert den Wert der Standardabweichung für die Gaußsche Funktion, d.h. wie viele Pixel auf dem Bildschirm ineinander übergehen; ein größerer Wert erzeugt somit mehr Unschärfe. Ein Wert von0
belässt die Eingabe unverändert. brightness()
-
Eine CSS
<percentage>
. Wendet einen linearen Multiplikator auf die Zeichnung an, sodass sie heller oder dunkler erscheint. Ein Wert unter100%
verdunkelt das Bild, während ein Wert über100%
es aufhellt. Ein Wert von0%
erzeugt ein komplett schwarzes Bild, während ein Wert von100%
die Eingabe unverändert lässt. contrast()
-
Eine CSS
<percentage>
. Passt den Kontrast der Zeichnung an. Ein Wert von0%
erzeugt eine komplett schwarze Zeichnung. Ein Wert von100%
lässt die Zeichnung unverändert. drop-shadow()
-
Wendet einen Schlagschatteneffekt auf die Zeichnung an. Ein Schlagschatten ist effektiv eine verschwommene, versetzte Version der Alpha-Maske der Zeichnung, die in einer bestimmten Farbe unter der Zeichnung zusammengesetzt wird. Diese Funktion nimmt bis zu fünf Argumente an:
<offset-x>
-
Siehe
<length>
für mögliche Einheiten. Gibt den horizontalen Abstand des Schattens an. <offset-y>
-
Siehe
<length>
für mögliche Einheiten. Gibt den vertikalen Abstand des Schattens an. <blur-radius>
-
Je größer dieser Wert ist, desto größer ist die Unschärfe, sodass der Schatten größer und heller wird. Negative Werte sind nicht erlaubt.
<color>
-
Siehe
<color>
-Werte für mögliche Schlüsselwörter und Notationen.
grayscale()
-
Eine CSS
<percentage>
. Wandelt die Zeichnung in Graustufen um. Ein Wert von100%
ist komplett in Graustufen. Ein Wert von0%
belässt die Zeichnung unverändert. hue-rotate()
-
Eine CSS
<angle>
. Wendet eine Farbtonrotation auf die Zeichnung an. Ein Wert von0deg
belässt die Eingabe unverändert. invert()
-
Eine CSS
<percentage>
. Invertiert die Zeichnung. Ein Wert von100%
bedeutet vollständige Invertierung. Ein Wert von0%
belässt die Zeichnung unverändert. opacity()
-
Eine CSS
<percentage>
. Wendet Transparenz auf die Zeichnung an. Ein Wert von0%
bedeutet vollständig transparent. Ein Wert von100%
belässt die Zeichnung unverändert. saturate()
-
Eine CSS
<percentage>
. Sättigt die Zeichnung. Ein Wert von0%
bedeutet vollständig ungesättigt. Ein Wert von100%
belässt die Zeichnung unverändert. sepia()
-
Eine CSS
<percentage>
. Wandelt die Zeichnung in Sepia um. Ein Wert von100%
bedeutet komplett Sepia. Ein Wert von0%
belässt die Zeichnung unverändert. none
-
Es wird kein Filter angewendet. Anfangswert.
Beispiele
Um diese Beispiele anzuzeigen, stellen Sie sicher, dass Sie einen Browser verwenden, der diese Funktion unterstützt; siehe die Kompatibilitätstabelle unten.
Anwenden einer Unschärfe
Dieses Beispiel verwischt ein Textstück mithilfe der filter
-Eigenschaft.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.filter = "blur(4px)";
ctx.font = "48px serif";
ctx.fillText("Hello world", 50, 100);
Ergebnis
Anwenden mehrerer Filter
Sie können beliebig viele Filter kombinieren. Dieses Beispiel wendet die Filter contrast
, sepia
und drop-shadow
auf ein Foto eines Nashorns an.
HTML
<canvas id="canvas" width="400" height="150"></canvas>
<div style="display:none;">
<img
id="source"
src="https://mdn.github.io/shared-assets/images/examples/rhino.jpg" />
</div>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const image = document.getElementById("source");
image.addEventListener("load", (e) => {
// Draw unfiltered image
ctx.drawImage(image, 0, 0, image.width * 0.6, image.height * 0.6);
// Draw image with filter
ctx.filter = "contrast(1.4) sepia(1) drop-shadow(-9px 9px 3px #e81)";
ctx.drawImage(image, 400, 0, -image.width * 0.6, image.height * 0.6);
});
Ergebnis
Spezifikationen
Specification |
---|
HTML Standard # dom-context-2d-filter-dev |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Das Interface, das diese Eigenschaft definiert:
CanvasRenderingContext2D
- CSS
filter
- CSS
<filter-function>