javascript+canvas制作九宫格小程序
js核心代码
/* *canvasid:htmlcanvas标签id *imageid:htmlimg标签id *gridcountX:x轴图片分割个数 *gridcountY:y轴图片分割个数 *gridspace:宫格空隙 *offsetX:x*y宫格相对canvas(0,0)X坐标偏移量 **offsetX:x*y宫格相对canvas(0,0)Y坐标偏移量 *isanimat:是否启用动画显示 */ functionImageGrid(canvasid,imageid,gridcountX,gridcountY,gridspace,offsetX,offsetY,isanimat){ varimage=newImage(); varg=document.getElementById(canvasid).getContext("2d"); varimg=document.getElementById(imageid); image.src=img.getAttribute("src"); g.drawImage(image,0,0); varimagedata=g.getImageData(0,0,image.width,image.height); vargrid_width=imagedata.width/gridcountX; vargrid_height=imagedata.height/gridcountY; //动画 if(isanimat){ varx=0, y=0; varinter=setInterval(function(){ g.putImageData(imagedata,gridspace*x+offsetX,gridspace*y+offsetY,grid_width*x,grid_height*y,grid_width,grid_height); x<gridcountX?x++:x=0; if(x==0){ y<gridcountY?y++:y=0; } },200); y==gridcountY?clearInterval(inter):null; }else{//非动画 for(vary=0;y<gridcountY;y++){ for(varx=0;x<gridcountX;x++){ g.putImageData(imagedata,gridspace*x+offsetX,gridspace*y+offsetY,grid_width*x,grid_height*y,grid_width,grid_height); } } } }
html代码
<canvasid="canvas1"width="900px"height="550px">Canvasdemo</canvas> <imgid="image1"style="display:none"src="https://img.jbzj.com/file_images/article/201412/2014122894620636.jpg"/>
使用方法:
//eg... ImageGrid("canvas1","image1",3,3,2,220,0,true);//3*3 ImageGrid("canvas1","image1",4,4,2,440,0,true);//4*4 ImageGrid("canvas1","image1",3,4,2,660,0,false);//3*4
代码很简洁,效果却非常炫酷,小伙伴们学会了吗?