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
代码很简洁，效果却非常炫酷，小伙伴们学会了吗？