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 von 0 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 unter 100% verdunkelt das Bild, während ein Wert über 100% es aufhellt. Ein Wert von 0% erzeugt ein komplett schwarzes Bild, während ein Wert von 100% die Eingabe unverändert lässt.

contrast()

Eine CSS <percentage>. Passt den Kontrast der Zeichnung an. Ein Wert von 0% erzeugt eine komplett schwarze Zeichnung. Ein Wert von 100% 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 von 100% ist komplett in Graustufen. Ein Wert von 0% belässt die Zeichnung unverändert.

hue-rotate()

Eine CSS <angle>. Wendet eine Farbtonrotation auf die Zeichnung an. Ein Wert von 0deg belässt die Eingabe unverändert.

invert()

Eine CSS <percentage>. Invertiert die Zeichnung. Ein Wert von 100% bedeutet vollständige Invertierung. Ein Wert von 0% belässt die Zeichnung unverändert.

opacity()

Eine CSS <percentage>. Wendet Transparenz auf die Zeichnung an. Ein Wert von 0% bedeutet vollständig transparent. Ein Wert von 100% belässt die Zeichnung unverändert.

saturate()

Eine CSS <percentage>. Sättigt die Zeichnung. Ein Wert von 0% bedeutet vollständig ungesättigt. Ein Wert von 100% belässt die Zeichnung unverändert.

sepia()

Eine CSS <percentage>. Wandelt die Zeichnung in Sepia um. Ein Wert von 100% bedeutet komplett Sepia. Ein Wert von 0% 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

html
<canvas id="canvas"></canvas>

JavaScript

js
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

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

js
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
# dom-context-2d-filter-dev

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
filter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch