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=img.getAttribute("src");
16     g.drawImage(image, 0, 0);
17     var imagedata = 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,打开浏览器观看。

 

转载于:https://www.cnblogs.com/veiny/p/4181480.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值