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

做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