CanvasRenderingContext2D：filter 属性

filter 属性接受一个值为 "none" 或一个或多个以下滤镜函数的字符串。

url()

一个 CSS url()。接收指向 SVG 滤镜元素的 IRI，该元素可以嵌入到外部 XML 文件中。

blur()

一个 CSS <length>。将高斯模糊应用于绘图。它定义了高斯函数的标准偏差值，即屏幕上多少像素彼此混合；因此，较大的值会产生更多的模糊。值为 0 则保持输入不变。

brightness()

一个 CSS <percentage>。将线性乘数应用于绘图，使其看起来更亮或更暗。小于 100% 的值会使图像变暗，而大于 100% 的值会使其变亮。值为 0% 将创建一个完全黑色的图像，而值为 100% 则保持输入不变。

contrast()

一个 CSS <percentage>。调整绘图的对比度。值为 0% 将创建一个完全黑色的绘图。值为 100% 则保持绘图不变。

drop-shadow()

将投影效果应用于绘图。投影实际上是绘图的 alpha 遮罩的模糊、偏移版本，以特定颜色绘制，并合成在绘图下方。此函数最多可接受五个参数

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