首页 > 代码库 > 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 }
View Code

 http://files.cnblogs.com/veiny/image_grid.xml

下载该xml文件后缀名改为html,打开浏览器观看。

 

javascript canvas九宫格小程序