越来越多的app在背景图中使用高斯模糊效果,如yahoo天气,感觉效果做得很炫。现在使用StackBlur.js在网页上也可以对Canvas实现高斯模糊效果,运行相当流畅,画面一点不卡。
引入资源
在网页中引入StackBlur.js
Html部分
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
t