欢迎您光临优码网!

StackBlur.js - 实现Canvas高斯模糊效果

越来越多的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 );

1. 本站所有资源来源于网络和用户上传!如有侵权请邮件联系客服!sys(at)hoohtml.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!
3. 本由本站提供的程序对您的网站或计算机造成严重后果的本站概不负责。