js特效教程（javascip特效代码大全）

　　前端

　　小试牛刀，实现了六款简单常见HTML5 Canvas特效滤镜，并且封装成一个纯JavaScript可调用的API文件gloomyfishfilter.js。支持的特效滤镜分别为

　　1.反色

　　2.灰色调

　　3.模糊

　　4.浮雕

　　5.雕刻

　　6.合理

　　滤镜原理解释

　　2.灰色调获取一个预期点RGB值r，g，b则新的RGB值

　　newr=（r 0.272）+（g 0.534）+（b 0.131）;

　　newg=（r 0.349）+（g 0.686）+（b 0.168）;

　　newb=（r 0.393）+（g 0.769）+（b 0.189）;

　　3.模糊基于一个5 5的卷积核

　　4.浮雕与雕刻

　　根据当前预期的前一个预期RGB值与它的后一个重新的RGB值之差再加上128

　　5.总体模拟了物体在镜子中与之对应的效果。

　　杂项准备1、如何获取Canvas 2d context对象

　　2、如何添加一个DOM img对象到Canvas对象中

　　3、如何从Canvas对象中获取预定数据

　　4、如何对DOM对象实现鼠标ClickEvent绑定

　　5、如何调用实现的gfilter API完成滤镜功能

　　6、浏览器支持IE，FF，Chrome上测试通过，其中IE上支持通过以下标签实现

　　效果演示

　　应用程序源代码

　　CSS部分

　　filter1.html中HTML源代码

　　filter1.html中JavaScript源代码

　　滤镜源代码（gloomyfishfilter.js）