CanvasRenderingContext2D: свойство filter

Свойство CanvasRenderingContext2D.filter API Canvas 2D предоставляет эффекты фильтрации, такие как размытие и полутоновое изображение. Оно аналогично свойству CSS filter и принимает те же значения.

Свойство filter принимает значение "none" или одно или несколько из следующих функций фильтра в строке.

url()

Функция CSS url(). Принимает любой URL, который разрешается в элемент SVG-фильтра. Это может быть идентификатор элемента, путь к внешнему XML-файлу или даже значение SVG, закодированное в данных.

blur()

Функция CSS <length>. Применяет размытие Гаусса к рисунку. Она определяет значение стандартного отклонения к функции Гаусса, то есть, сколько пикселей на экране смешиваются друг с другом; таким образом, большее значение создаст большее размытие. Значение 0 оставляет входные данные без изменений.

brightness()

Функция CSS <percentage>. Применяет линейный множитель к рисунку, делая его ярче или темнее. Значение меньше 100% затемняет изображение, а значение больше 100% осветляет его. Значение 0% создаст изображение, которое будет полностью черным, а значение 100% оставляет входные данные без изменений.

contrast()

Функция CSS <percentage>. Регулирует контрастность рисунка. Значение 0% создаст рисунок, который будет полностью черным. Значение 100% оставляет рисунок без изменений.

drop-shadow()

Применяет эффект тени к рисунку. Тень фактически является размытой, смещенной версией альфа-маски рисунка, нарисованной в определенном цвете, наложенной под рисунком. Эта функция принимает до пяти аргументов:

<offset-x>

Возможные единицы см. в <length>. Указывает горизонтальное смещение тени.

<offset-y>

Возможные единицы см. в <length>. Указывает вертикальное смещение тени.

<blur-radius>

Чем больше это значение, тем больше размытие, поэтому тень становится больше и светлее. Отрицательные значения не допускаются.

<color>

Возможные ключевые слова и обозначения см. в <color>.

grayscale()

Функция CSS <percentage>. Преобразует рисунок в полутоновое изображение. Значение 100% полностью полутоновое. Значение 0% оставляет рисунок без изменений.

hue-rotate()

Функция CSS <angle>. Применяет вращение цветового тона к рисунку. Значение 0deg оставляет входные данные без изменений.

invert()

Функция CSS <percentage>. Инвертирует рисунок. Значение 100% означает полную инверсию. Значение 0% оставляет рисунок без изменений.

opacity()

Функция CSS <percentage>. Применяет прозрачность к рисунку. Значение 0% означает полную прозрачность. Значение 100% оставляет рисунок без изменений.

saturate()

Функция CSS <percentage>. Насыщает рисунок. Значение 0% означает полную ненасыщенность. Значение 100% оставляет рисунок без изменений.

sepia()

Функция CSS <percentage>. Преобразует рисунок в сепию. Значение 100% означает полную сепию. Значение 0% оставляет рисунок без изменений.

none

Фильтр не применяется. Начальное значение.

Чтобы просмотреть эти примеры, убедитесь, что ваш браузер поддерживает эту функцию; см. таблицу совместимости ниже.

В этом примере используется свойство filter для размытия фрагмента текста.

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);

Результат

Вы можете комбинировать любое количество фильтров. В этом примере к фотографии носорога применяются фильтры contrast, sepia, и drop-shadow.

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);
});

Результат

• Интерфейс, определяющий это свойство: CanvasRenderingContext2D
• CSS filter
• CSS <filter-function>