CanvasRenderingContext2D: filter-Eigenschaft

Wert

Die filter-Eigenschaft akzeptiert entweder den Wert "none" oder einen oder mehrere der folgenden Filterfunktionen in einem String.

url()

Eine CSS-url(). Nimmt jede URL, die sich zu einem SVG-Filter-Element auflöst. Dies kann die ID eines Elements, ein Pfad zu einer externen XML-Datei oder sogar ein Daten-enkodierter 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 Gauss'sche Funktion, d.h. wie viele Pixel auf dem Bildschirm ineinander übergehen; ein größerer Wert erzeugt also mehr Unschärfe. Ein Wert von 0 lässt den Eingang unverändert.

brightness()

Eine CSS-<percentage>. Wendet einen linearen Multiplikator auf die Zeichnung an, wodurch sie heller oder dunkler erscheint. Ein Wert unter 100% verdunkelt das Bild, während ein Wert über 100% es aufhellt. Ein Wert von 0% wird ein vollständig schwarzes Bild erzeugen, während ein Wert von 100% den Eingang unverändert lässt.

contrast()

Eine CSS-<percentage>. Passt den Kontrast der Zeichnung an. Ein Wert von 0% wird eine vollständig schwarze Zeichnung erzeugen. Ein Wert von 100% lässt die Zeichnung unverändert.

drop-shadow()

Wendet einen Schlagschatteneffekt auf die Zeichnung an. Ein Schlagschatten ist im Wesentlichen eine unscharfe, versetzte Version der Alpha-Maske der Zeichnung, die in einer bestimmten Farbe darunter zusammengesetzt wird. Diese Funktion nimmt bis zu fünf Argumente:

<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, desto größer der Weichzeichner, wodurch der Schatten größer und leichter wird. Negative Werte sind nicht erlaubt.

<color>

Siehe <color>-Werte für mögliche Schlüsselwörter und Notationen.

grayscale()

Eine CSS-<percentage>. Konvertiert die Zeichnung in Graustufen. Ein Wert von 100% ist vollständig in Graustufen. Ein Wert von 0% lässt die Zeichnung unverändert.

hue-rotate()

Eine CSS-<angle>. Wendet eine Farbtonrotation auf die Zeichnung an. Ein Wert von 0deg lässt den Eingang unverändert.

invert()

Eine CSS-<percentage>. Kehrt die Zeichnung um. Ein Wert von 100% bedeutet vollständige Umkehrung. Ein Wert von 0% lä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% lä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% lässt die Zeichnung unverändert.

sepia()

Eine CSS-<percentage>. Konvertiert die Zeichnung in Sepia. Ein Wert von 100% bedeutet vollständig in Sepia. Ein Wert von 0% lässt die Zeichnung unverändert.

none

Es wird kein Filter angewendet. Anfangswert.

Beispiele

Um diese Beispiele anzusehen, stellen Sie sicher, dass Sie einen Browser verwenden, der dieses Feature unterstützt; siehe die Kompatibilitätstabelle unten.

Anwendung einer Unschärfe

Dieses Beispiel verwischt einen Textabschnitt 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 class="hidden">
  <img
    id="source"
    src="https://mdn.github.io/shared-assets/images/examples/rhino.jpg" />
</div>

.hidden {
  display: none;
}

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 #ee8811)";
  ctx.drawImage(image, 400, 0, -image.width * 0.6, image.height * 0.6);
});

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die Schnittstelle, die diese Eigenschaft definiert: CanvasRenderingContext2D
• CSS filter
• CSS <filter-function>