热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

用Javascript实现让Canvas变模糊的效果

做Canvas应用的开发,可能会碰到需要使画面模糊的需求。容易想到三种方式:1、半透明模糊PNG覆盖的方式,这种方式简单易行,但是不能灵活控制模糊程度。2、CSS方式,比如用-w

做Canvas应用的开发,可能会碰到需要使画面模糊的需求。

容易想到三种方式:

1、半透明模糊 PNG 覆盖的方式,这种方式简单易行,但是不能灵活控制模糊程度。

2、CSS方式,比如用-webkit-filter:blur(10px); 的形式,也极其简单,可控制模糊程度,但是这种方式的效果很差很差,中心模糊度高,四周模糊度低,而且整个元素外围会有光晕效果,已经不是真正意义的模糊了。

3、Javascript方式更新画布,最灵活,效果最好,自己写代码就复杂一点,但是已经有现成的js库可以使用了,简单调用函数即可。这个也是本文要推荐的。

这个js库的名称叫做: StackBlur, 目前的版本是0.5

有人可能担心用js处理整个画布会因为大量运算导致效率问题,经我测试,运行demo相当流畅,拖动滑块,画面一点不卡。

这个库提供了3个函数:

stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel );    //用于将图片模糊绘制到canvas
stackBlurCanvasRGBA( targetCanvasID, top_x, top_y, width, height, radius );  //用于对Canvas矩形区域执行RGBA模糊
stackBlurCanvasRGB( targetCanvasID, top_x, top_y, width, height, radius );     //用于对Canvas矩形区域执行RGB模糊,不考虑Alpha值

下面是效果图。第一个图是原图,第二个图是模糊半径为32的效果。


DEMO网址 StackBlue Demo

作者:Mario Klingemann

算法说明 StackBlur algorithm.(英文的)网址2

下载源文件: StackBlur v0.5


推荐阅读
author-avatar
手机用户2502887763
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有