CanvasRenderingContext2D.filter

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

这是实验性技术
检查浏览器兼容性表格要小心谨慎在生产中使用这之前。

CanvasRenderingContext2D .filter property of the Canvas 2D API provides filter effects such as blurring and grayscaling. It is similar to the CSS filter property and accepts the same values.

句法

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

值

filter property accepts a value of "none" or one or more of the following filter functions in a DOMString .

url()

A CSS


									<url>

. Takes an IRI pointing to an SVG filter element, which may be embedded in an external XML file.

blur()

A CSS


									<length>

. Applies a Gaussian blur to the drawing. It defines the value of the standard deviation to the Gaussian function, i.e., how many pixels on the screen blend into each other; thus, a larger value will create more blur. A value of

leaves the input unchanged.

brightness()

A CSS


									<percentage>

. Applies a linear multiplier to the drawing, making it appear brighter or darker. A value under


								100%

darkens the image, while a value over


								100%

brightens it. A value of

0%

will create an image that is completely black, while a value of


								100%

leaves the input unchanged.

contrast()

A CSS


									<percentage>

. Adjusts the contrast of the drawing. A value of

0%

will create a drawing that is completely black. A value of


								100%

leaves the drawing unchanged.

drop-shadow()

Applies a drop shadow effect to the drawing. A drop shadow is effectively a blurred, offset version of the drawing's alpha mask drawn in a particular color, composited below the drawing. This function takes up to five arguments:

<offset-x> : See <length> for possible units. Specifies the horizontal distance of the shadow.
<offset-y> : See <length> for possible units. Specifies the vertical distance of the shadow.
<blur-radius> : The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed.
<color> : See <color> values for possible keywords and notations.

grayscale()

A CSS


									<percentage>

. Converts the drawing to grayscale. A value of


								100%

is completely grayscale. A value of

0%

leaves the drawing unchanged.

hue-rotate()

A CSS


									<angle>

. Applies a hue rotation on the drawing. A value of


								0deg

leaves the input unchanged.

invert()

A CSS


									<percentage>

. Inverts the drawing. A value of


								100%

means complete inversion. A value of

0%

leaves the drawing unchanged.

opacity()

A CSS


									<percentage>

. Applies transparency to the drawing. A value of

0%

means completely transparent. A value of


								100%

leaves the drawing unchanged.

saturate()

A CSS


									<percentage>

. Saturates the drawing. A value of

0%

means completely un-saturated. A value of


								100%

leaves the drawing unchanged.

sepia()

A CSS


									<percentage>

. Converts the drawing to sepia. A value of


								100%

means completely sepia. A value of

0%

leaves the drawing unchanged.

none

No filter is applied. Initial value.

范例

To view these examples, make sure to use a browser that supports this feature; see the compatibility table below.

Applying a blur

This example blurs a piece of text using the 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);

结果

Applying multiple filters

You can combine as many filters as you like. This example applies the contrast , sepia ，和 drop-shadow filters to a photo of a gecko.

HTML

<canvas id="canvas"></canvas>
<div style="display:none;">
  <img id="source"
       src="https://interactive-examples.mdn.mozilla.net/media/examples/gecko-320-213.jpg">
</div>

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('source');
image.addEventListener('load', e => {
  ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)';
  ctx.drawImage(image, 10, 10, 180, 120);
});

结果

规范

规范	状态	注释
HTML 实时标准 The definition of 'CanvasRenderingContext2D.filter' in that specification.	实时标准	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`filter`	Chrome 52	Edge 79	Firefox 49 49 不支持 35 — 48 Disabled Disabled ). To change preferences in Firefox, visit	IE No	Opera No	Safari No	WebView Android 52	Chrome Android 52	Firefox Android 49 49 不支持 35 — 48 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android No	Safari iOS No	Samsung Internet Android 6.0

图例

完整支持
不支持
实验。期望将来行为有所改变。
用户必须明确启用此特征。

另请参阅

The interface defining this property: CanvasRenderingContext2D
CSS filter
CSS <filter-function>

元数据

最后修改： Aug 6, 2020

在此页

句法

值

范例

Applying a blur

HTML

JavaScript

结果

Applying multiple filters

HTML

JavaScript

结果

规范

浏览器兼容性

图例

另请参阅

相关话题