纯javascript实现html5canvas六种特效滤镜.docx

HTTP//WWWLAMPBROTHERNET纯JAVASCRIPT实现HTML5CANVAS六种特效滤镜小试牛刀，实现了六款简单常见HTML5CANVAS特效滤镜，并且封装成一个纯JAVASCRIPT可调用的API文件GLOOMYFISHFILTERJS。支持的特效滤镜分别为1反色2灰色调3模糊4浮雕5雕刻6镜像滤镜原理解释1反色获取一个像素点RGB值R,G,B则新的RGB值为255R,255G,255B2灰色调获取一个像素点RGB值R,G,B则新的RGB值为NEWRR0272G0534B0131NEWGR0349G0686B0168HTTP//WWWLAMPBROTHERNETNEWBR0393G0769B01893模糊基于一个55的卷积核4浮雕与雕刻基于当前像素的前一个像素RGB值与它的后一个像素的RGB值之差再加上1285镜像模拟了物体在镜子中与之对应的效果。杂项准备1如何获取CANVAS2DCONTEXT对象VARCANVASDOCUMENTGETELEMENTBYID“TARGET“CANVASWIDTHSOURCECLIENTWIDTHCANVASHEIGHTSOURCECLIENTHEIGHTIFCANVASGETCONTEXT{CONSOLELOG“CANVASNOTSUPPORTEDPLEASEINSTALLAHTML5COMPATIBLEBROWSER“RETURN}//GET2DCONTEXTOFCANVASANDDRAWIMAGETEMPCONTEXTCANVASGETCONTEXT“2D“HTTP//WWWLAMPBROTHERNET2如何绘制一个DOMIMG对象到CANVAS对象中VARSOURCEDOCUMENTGETELEMENTBYID“SOURCE“TEMPCONTEXTDRAWIMAGESOURCE,0,0,CANVASWIDTH,CANVASHEIGHT3如何从CANVAS对象中获取像素数据VARCANVASDOCUMENTGETELEMENTBYID“TARGET“VARLENCANVASWIDTHCANVASHEIGHT4VARCANVASDATATEMPCONTEXTGETIMAGEDATA0,0,CANVASWIDTH,CANVASHEIGHTVARBINARYDATACANVASDATADATA4如何对DOM对象实现鼠标CLICK事件绑定FUNCTIONBINDBUTTONEVENTELEMENT,TYPE,HANDLER{IFELEMENTADDEVENTLISTENER{ELEMENTADDEVENTLISTENERTYPE,HANDLER,FALSE}ELSE{ELEMENTATTACHEVENTONTYPE,HANDLER//FORIE6,7,8}}5如何调用实现的GFILTERAPI完成滤镜功能//导入API文件HTTP//WWWLAMPBROTHERNETGFILTERCOLORINVERTPROCESSBINARYDATA,LEN//调用API6浏览器支持IE,FF,CHROME上测试通过，其中IE上支持通过以下标签实现效果演示HTTP//WWWLAMPBROTHERNET应用程序源代码HTTP//WWWLAMPBROTHERNETCSS部分CSSVIEWPLAINCOPY1SVGCONTAINER{2WIDTH800PX3HEIGHT600PX4BACKGROUNDCOLOREEEEEE5}67SOURCEDIV{FLOATLEFTBORDER2PXSOLIDBLUE}8TARGETDIV{FLOATRIGHTBORDER2PXSOLIDRED}FILTER1HTML中HTML源代码HTMLVIEWPLAINCOPY123456CANVASFILTERDEMO7891011HTMLCANVASIMAGEPROCESSBYGLOOMYFISH12131415161718192021反色22灰色调23模糊24浮雕25雕刻26镜像HTTP//WWWLAMPBROTHERNET272829FILTER1HTML中JAVASCRIPT源代码JAVASCRIPTVIEWPLAINCOPY1VARTEMPCONTEXTNULL//GLOBALVARIABLE2DCONTEXT2WINDOWONLOADFUNCTION{3VARSOURCEDOCUMENTGETELEMENTBYID“SOURCE“4VARCANVASDOCUMENTGETELEMENTBYID“TARGET“5CANVASWIDTHSOURCECLIENTWIDTH6CANVASHEIGHTSOURCECLIENTHEIGHT78IFCANVASGETCONTEXT{9CONSOLELOG“CANVASNOTSUPPORTEDPLEASEINSTALLAHTML5COMPATIBLEBROWSER“10RETURN11}1213//GET2DCONTEXTOFCANVASANDDRAWIMAGE14TEMPCONTEXTCANVASGETCONTEXT“2D“15TEMPCONTEXTDRAWIMAGESOURCE,0,0,CANVASWIDTH,CANVASHEIGHT1617//INITIALIZATIONACTIONS18VARINBUTTONDOCUMENTGETELEMENTBYID“INVERTBUTTON“19VARADBUTTONDOCUMENTGETELEMENTBYID“ADJUSTBUTTON“20VARBLURBUTTONDOCUMENTGETELEMENTBYID“BLURBUTTON“21VARREBUTTONDOCUMENTGETELEMENTBYID“RELIEFBUTTON“22VARDKBUTTONDOCUMENTGETELEMENTBYID“DIAOKEBUTTON“23VARMIRRORBUTTONDOCUMENTGETELEMENTBYID“MIRRORBUTTON“2425//BINDMOUSECLICKEVENT26BINDBUTTONEVENTINBUTTON,“CLICK“,INVERTCOLOR27BINDBUTTONEVENTADBUTTON,“CLICK“,ADJUSTCOLOR28BINDBUTTONEVENTBLURBUTTON,“CLICK“,BLURIMAGE29BINDBUTTONEVENTREBUTTON,“CLICK“,FUDIAOIMAGE30BINDBUTTONEVENTDKBUTTON,“CLICK“,KEDIAOIMAGE31BINDBUTTONEVENTMIRRORBUTTON,“CLICK“,MIRRORIMAGE32}33HTTP//WWWLAMPBROTHERNET34FUNCTIONBINDBUTTONEVENTELEMENT,TYPE,HANDLER35{36IFELEMENTADDEVENTLISTENER{37ELEMENTADDEVENTLISTENERTYPE,HANDLER,FALSE38}ELSE{39ELEMENTATTACHEVENTONTYPE,HAND