[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.filter

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

Przykłady:

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

// javascript, uzyskać odwołanie do elementu canvas, CanvasRenderingContext2D korzystając z canvas właściwości
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// filtr rozmycia
ctx.filter = "blur(5px)";
ctx.font = "25px serif";
ctx.fillText("Witaj!", 25, 75);

// html
<canvas id="canvas" width="200" height="50"></canvas>
<div style="display:none;">
 <img id="foto" src="/dom.jpg" />
</div>

// javascript, uzyskać odwołanie do elementu canvas, CanvasRenderingContext2D korzystając z canvas właściwości
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const image = document.getElementById("foto");

image.addEventListener("load", (e) => {
 // Narysuj niefiltrowany obraz
 ctx.drawImage(image, 0, 0, image.width * 0.5, image.height * 0.5);

 // Narysuj obraz za pomocą filtra
 ctx.filter = "contrast(1.2) sepia(1) drop-shadow(-5px 5px 3px #e55)";
 ctx.drawImage(image, 380, 0, -image.width * 0.5, image.height * 0.5);
});

Opis:
Właściwość CanvasRenderingContext2D.filter zapewnia efekty filtrów, takie jak rozmycie i skalowanie szarości. Jest podobna do filter właściwości CSS i akceptuje te same wartości. Właściwość filter akceptuje wartość "none" jednej lub większej liczby następujących funkcji filtrujących w ciągu znaków.

url() - CSS url(). Pobiera IRI wskazujący element filtra SVG, który może być osadzony w zewnętrznym pliku XML.
blur() - CSS <length>. Stosuje do rysunku rozmycie gaussowskie. Określa wartość odchylenia standardowego funkcji Gaussa, czyli ile pikseli na ekranie zlewa się ze sobą; dlatego większa wartość spowoduje większe rozmycie. Wartość 0 pozostawia dane wejściowe bez zmian.
brightness() - CSS <percentage>. Stosuje do rysunku mnożnik liniowy, dzięki czemu wydaje się on jaśniejszy lub ciemniejszy. Wartość under 100% przyciemnia obraz, a wartość over 100% rozjaśnia. Wartość 0% tworzy obraz, który jest całkowicie czarny, natomiast wartość 100% pozostawia dane wejściowe bez zmian.
contrast() - CSS <percentage>. Dostosowuje kontrast rysunku. Wartość 0% spowoduje utworzenie rysunku, który będzie całkowicie czarny. Wartość 100% pozostawia rysunek bez zmian.
drop-shadow() - Stosuje efekt cienia do rysunku. Cień to tak naprawdę rozmyta, przesunięta wersja maski alfa rysunku narysowana w określonym kolorze i ułożona pod rysunkiem. Funkcja ta przyjmuje maksymalnie pięć argumentów:

<offset-x> Zobacz <length> możliwe jednostki. Określa poziomą odległość cienia.
<offset-y> Zobacz <length> możliwe jednostki. Określa pionową odległość cienia.
<blur-radius> Im większa jest ta wartość, tym większe rozmycie, przez co cień staje się większy i jaśniejszy. Wartości ujemne są niedozwolone.
<color> Zobacz <color> wartości możliwych słów kluczowych i notacji.

grayscale() - CSS <percentage>. Konwertuje rysunek na skalę szarości. Wartość 100% jest całkowicie w skali szarości. Wartość 0% pozostawia rysunek bez zmian.
hue-rotate() - CSS <angle>. Stosuje rotację odcienia na rysunku. Wartość 0deg pozostawia dane wejściowe bez zmian.
invert() - CSS <percentage>. Odwraca rysunek. Wartość oznacza 100% całkowitą inwersję. Wartość 0% pozostawia rysunek bez zmian.
opacity() - CSS <percentage>. Stosuje przezroczystość do rysunku. Wartość oznacza 0% całkowicie przejrzystą. Wartość 100% pozostawia rysunek bez zmian.
saturate() - CSS <percentage>. Nasyca rysunek. Wartość oznacza 0% całkowicie nienasycony. Wartość 100% pozostawia rysunek bez zmian.
sepia() - CSS <percentage>. Konwertuje rysunek na sepię. Wartość oznacza 100% całkowicie sepię. Wartość 0% pozostawia rysunek bez zmian.
none - Nie zastosowano żadnego filtra. Wartość początkowa.

Zobacz też: