CanvasRenderingContext2D.filter

了解CanvasRenderingContext2D.filter

简介

CanvasRenderingContext2D.filter可以给Canvas图形设置各类滤镜效果，使用的滤镜函数和CSS filter属性一样。

语法

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

其中：

<filter-function>

表示滤镜函数，详见这里，可以任意多个叠加。

none

表示不使用滤镜效果。

滤镜函数

支持的滤镜函数如下表所示：

各个滤镜的渲染效果如下所示：

1. 模糊

context.filter = 'blur(5px)';

2. 亮度

数值越大越明亮，100%是原始亮度。

context.filter = 'brightness(240%)';

3. 对比度

数值越大对比度越大，100%是原始对比度。

context.filter = 'contrast(200%)';

4. 投影

支持4个参数值，分别是水平偏移大小、垂直偏移大小、模糊半径大小和投影的颜色。

context.filter = 'drop-shadow(4px 4px 8px blue)';

5. 灰度

0%表示完全灰度。

context.filter = 'grayscale(50%)';

6. 色调变化

任意的角度单位都可以，例如圈数、弧度、百分度等。

context.filter = 'hue-rotate(90deg)';

7. 反相

指色调完全翻转。

context.filter = 'invert(75%)';

8. 透明度

建议使用globalAlpha属性实现Canvas的半透明效果，因为兼容性更好。

context.filter = 'opacity(25%)';

9. 饱和度

数值越大，饱和度越高，100%是默认饱和度。

context.filter = 'saturate(230%)';

10. 褐色

让图形表现为褐色，默认是0%。

context.filter = 'sepia(60%)';

案例

局部高斯模糊的实现

由于IE和Safari浏览器并不支持这里的滤镜属性，因此，需要借助第三方的JS算法实现。

var eleImg = document.getElementById('image');
var canvasBlur = document.getElementById('localBlur');
if (eleImg && canvasBlur) {
    var contextBlur = canvasBlur.getContext('2d');
    var funDrawBlur = function () {
        // 填充底部图像
        contextBlur.drawImage(eleImg, 0, 0);
        // 创建一个屏外canvas
        var canvasOff = document.createElement('canvas');
        canvasOff.width = canvasBlur.width;
        canvasOff.height = canvasBlur.height;
        var contextOff = canvasOff.getContext('2d');
        
        // 执行模糊
        if (typeof contextBlur.filter == 'string') {
            // 支持canvas滤镜
            contextOff.filter = 'blur(10px)';
            // 绘制局部图像
            contextOff.drawImage(eleImg, 100, 60, 300, 213, 100, 60, 300, 213);
            // 上层图像绘制
            contextBlur.drawImage(canvasOff, 0, 0);
        } else {
            // 不支持Canvas滤镜
            // 使用第三方方法
            var blurFixed = new Blur({
                radius: 10,
                // 高斯算法性能较差
                gaussian : false
            });
            blurFixed.init();
            // 先绘制局部图像
            contextOff.drawImage(eleImg, 100, 60, 300, 213, 100, 60, 300, 213);
            // 再执行模糊
            var imgBlured = blurFixed.blurRGBA(canvasOff, null, true);
            // 上层图像绘制
            contextBlur.drawImage(imgBlured, 0, 0);
        }
    };
    if (eleImg.naturalWidth) {
        funDrawBlur();
    } else {
        eleImg.onload = funDrawBlur;
    }
}

其他

规范文档

相关资源

暂无

兼容性

Chrome 52+、Firefox 49+，IE 不支持、Safari不支持、部分 Android 移动设备不支持。

最近更新：by zhangxinxu 2021-09-26 22:06:00