We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CanvasRenderingContext2D.filter

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

CanvasRenderingContext2D.filter 是Canvas 2D API 提供模糊、灰度等过滤效果的属性 。它类似于 CSS filter 属性,并且接受相同的函数。

语法

ctx.filter = "<filter-function1> [<filter-function2] [<filter-functionN]";
ctx.filter = "none";

Filter 函数

filter 属性接受DOMString字符串,可以包含一个或多个 filter 函数 。

url(<url>)
url() 函数接受一个描述SVG过滤器的XML文件的位置, 并且可以包含一个针对特殊过滤元素的锚点。
blur(<length>)
length:CSS 长度。 给绘图提供一个高斯模糊。
brightness(<percentage>)
Percentage:百分比。 给绘图提供一个线性乘法,调节亮度的高低。
contrast(<percentage>)
Percentage:百分比。 调节图像的对比度。 当数值为 0% 时,图像会完全变黑。当数值为 100% 时,图像没有任何变化。
drop-shadow(<offset-x>, <offset-y>, <blur-radius>, <spread-radius>, <color>)
给绘图提供阴影。 阴影事实上是在图像下面呈现出模糊的,通过对图像的透明遮罩进行偏移绘制出一种特殊的颜色,组合而成的效果。 这个函数接受5个参数:
  • <offset-x>: 查看 <length> 允许的单位。描述阴影的水平距离。
  • <offset-y>: 查看 <length> 允许的单位。描述阴影的垂直距离。
  • <blur-radius>: 数值越大,模糊就越大,从而使阴影范围变得更大颜色变得更浅。不允许为负数。
  • <spread-radius>: 正数会使阴影扩张变大,负数会使阴影收缩。
  • <color>: 查看 <color> 允许的关键字和标识符。
grayscale(<percentage>)
Percentage:百分比。将图像转换成灰色的图片。 当值为100%时,图像会完全变成灰色。 当值为0%时,图像没有任何变化。
hue-rotate(<degree>)
Degree:度数。 对图像进行色彩旋转的处理。当值为0度时,图像没有任何变化。
invert(<percentage>)
Percentage:百分比。反色图像(呈现出照片底片的效果)。当值为100%时,图像会完全反色处理。当值为0%时,图像没有任何变化。
opacity(<percentage>)
Percentage:百分比。对图像进行透明度的处理。 当值为0%时,图像完全透明。当值为100%时,图像没有任何变化。
saturate(<percentage>)
对图像进行饱和度的处理。当值为0%时,图像完全不饱和。当值为100%时,图像没有任何变化。
sepia(<percentage>)
对图像进行深褐色处理(怀旧风格)。 当值为100%时,图像完全变成深褐色。当值为0%时,图像没有任何变化。
none
没有使用filter。

示例

使用 filter 属性

这是一段使用 filter 属性的简单的代码片段。

HTML

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

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.filter = "blur(5px)";
ctx.font = "48px serif";
ctx.strokeText("Hello world", 50, 100);

修改下面的代码并在线查看canvas的变化 (确保你的浏览器提供这些特性,查看浏览器兼容性列表):

规范描述

当前的规范或草案不包含此内容, 但是正考虑进行标准化。参考 CSS Filter Effects 规范。

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 未实现 35 (35) [1] 未实现 未实现 未实现
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 未实现 未实现 35.0 (35) [1] 未实现 未实现 未实现

Gecko-specific 注解

  • [1] filter 属性默认是无效的。你可以通过设置 canvas.filters.enabled 的值为true进行启用。

参见

文档标签和贡献者

此页面的贡献者: Sebastianz, ice-i-snow
最后编辑者: Sebastianz,