首页 > 代码库 > javascript canvas九宫格小程序
javascript canvas九宫格小程序
js核心代码
1 /* 2 *canvasid:html canvas标签id 3 *imageid:html img 标签id 4 *gridcountX:x轴图片分割个数 5 *gridcountY:y轴图片分割个数 6 *gridspace:宫格空隙 7 *offsetX:x*y宫格相对canvas(0,0)X坐标偏移量 8 **offsetX:x*y宫格相对canvas(0,0)Y坐标偏移量 9 *isanimat:是否启用动画显示10 */11 function ImageGrid(canvasid, imageid, gridcountX, gridcountY, gridspace, offsetX, offsetY, isanimat) {12 var image = new Image();13 var g = document.getElementById(canvasid).getContext("2d");14 var img=document.getElementById(imageid);15 image.src=http://www.mamicode.com/img.getAttribute("src");16 g.drawImage(image, 0, 0);17 var imagedata = http://www.mamicode.com/g.getImageData(0, 0, image.width, image.height);18 var grid_width = imagedata.width / gridcountX;19 var grid_height = imagedata.height / gridcountY;20 //动画21 if (isanimat) {22 var x = 0,23 y = 0;24 var inter = setInterval(function() {25 g.putImageData(imagedata, gridspace * x + offsetX, gridspace * y + offsetY, grid_width * x, grid_height * y, grid_width, grid_height);26 x < gridcountX ? x++ : x = 0;27 if (x == 0) {28 y < gridcountY ? y++ : y = 0;29 }30 }, 200);31 y == gridcountY ? clearInterval(inter) : null;32 } else { //非动画33 for (var y = 0; y < gridcountY; y++) {34 for (var x = 0; x < gridcountX; x++) {35 g.putImageData(imagedata, gridspace * x + offsetX, gridspace * y + offsetY, grid_width * x, grid_height * y, grid_width, grid_height);36 }37 }38 }39 }
http://files.cnblogs.com/veiny/image_grid.xml
下载该xml文件后缀名改为html,打开浏览器观看。
javascript canvas九宫格小程序
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。