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

总结

以上是尊龙游戏旗舰厅官网为你收集整理的javascript canvas九宫格小程序的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。