程序喵
越来越多的app在背景图中使用高斯模糊效果，如yahoo天气，感觉效果做得很炫。现在使用StackBlur.js在网页上也可以对Canvas实现高斯模糊效果，运行相当流畅，画面一点不卡。
引入资源
在网页中引入StackBlur.js
<script src="js/StackBlur.js"></script>
Html部分
<img id="kitten" src="image/cat.jpg" style="display:none" /> <p><canvas id="canvas01" width="220" height="208"></canvas></p>
Javascript代码
stackBlurImage('kitten', 'canvas01', 23);
就是如此简单，另外stackBlur提供了3个函数实现模糊效果
//用于将图片模糊绘制到canvas stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel ); //用于对Canvas矩形区域执行RGBA模糊 stackBlurCanvasRGBA( targetCanvasID, top_x, top_y, width, height, radius ); //用于对Canvas矩形区域执行RGB模糊，不考虑Alpha值 stackBlurCanvasRGB( targetCanvasID, top_x, top_y, width, height, radius );
API 调用
下面是针对不同的源（图片或者 Canvas 等）进行 StackBlur 的调用。
图像作为源:
StackBlur.image(sourceImage, targetCanvas, radius, blurAlphaChannel);
sourceImage：HTMLImageElement或者它的id
targetCanvas：HTMLCanvasElement或者它的id
radius：模糊半径
blurAlphaChannel： 如果你想模糊一个 RGBA 的图像，就将其设置为true（可选，默认 =false）
RGBA Canvas 作为源:
StackBlur.canvasRGBA(targetCanvas, top_x, top_y, width, height, radius);
targetCanvas: HTMLCanvasElement
top_x: 要模糊的矩形的左上角的水平坐标
top_y: 要模糊的矩形的左上角的垂直坐标
width: 要模糊的矩形宽度
height: 要模糊的矩形高度
radius: 模糊半径
RGB Canvas 作为源:
StackBlur.canvasRGB(targetCanvas, top_x, top_y, width, height, radius);
targetCanvas: HTMLCanvasElement
top_x: 要模糊的矩形的左上角的水平坐标
top_y: 要模糊的矩形的左上角的垂直坐标
width: 要模糊的矩形宽度
height: 要模糊的矩形高度
radius: 模糊半径
RGBA ImageData 作为源:
StackBlur.imageDataRGBA(imageData, top_x, top_y, width, height, radius);
imageData: canvas 的ImageData
top_x：要模糊的矩形的左上角的水平坐标
top_y: 要模糊的矩形的左上角的垂直坐标
width: 要模糊的矩形宽度
height: 要模糊的矩形高度
radius: 模糊半径
RGB ImageData 作为源:
StackBlur.imageDataRGB(imageData, top_x, top_y, width, height, radius);
imageData: canvas 的ImageData
top_x：要模糊的矩形的左上角的水平坐标
top_y: 要模糊的矩形的左上角的垂直坐标
width: 要模糊的矩形宽度
height: 要模糊的矩形高度
radius: 模糊半径
在线演示：http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
GitHub：https://github.com/flozz/StackBlur
未经允许请勿转载：程序喵 » StackBlur.js - 实现Canvas高斯模糊效果