CanvasRenderingContext2D: filter 属性

值

filter 属性接受 "none" 值，或者字符串中包含以下一个或多个滤镜函数。

url()

CSS url()。接受任何解析为 SVG 滤镜元素的 URL。这可以是元素的 ID、外部 XML 文件的路径，甚至是经过数据编码的 SVG 值。

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>。将绘图转换为棕褐色（sepia）。值为 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 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);
});

结果

规范

浏览器兼容性

另见

• 定义此属性的接口：CanvasRenderingContext2D
• CSS filter
• CSS <filter-function>