javascript+canvas制作九宫格小程序


Posted in Javascript onDecember 28, 2014

js核心代码

/*

 *canvasid:html canvas标签id

 *imageid:html img 标签id

 *gridcountX:x轴图片分割个数

 *gridcountY:y轴图片分割个数

 *gridspace:宫格空隙

 *offsetX:x*y宫格相对canvas(0,0)X坐标偏移量

 **offsetX:x*y宫格相对canvas(0,0)Y坐标偏移量

 *isanimat:是否启用动画显示

 */

function ImageGrid(canvasid, imageid, gridcountX, gridcountY, gridspace, offsetX, offsetY, isanimat) {

    var image = new Image();

    var g = document.getElementById(canvasid).getContext("2d");

    var img=document.getElementById(imageid);

    image.src=img.getAttribute("src");

    g.drawImage(image, 0, 0);

    var imagedata = g.getImageData(0, 0, image.width, image.height);

    var grid_width = imagedata.width / gridcountX;

    var grid_height = imagedata.height / gridcountY;

    //动画

    if (isanimat) {

        var x = 0,

            y = 0;

        var inter = 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 (var y = 0; y < gridcountY; y++) {

            for (var x = 0; x < gridcountX; x++) {

                g.putImageData(imagedata, gridspace * x + offsetX, gridspace * y + offsetY, grid_width * x, grid_height * y, grid_width, grid_height);

            }

        }

    }

}

html代码

<canvas id="canvas1" width="900px" height="550px">Canvas demo</canvas>

 <img id="image1" style="display:none" src="//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

代码很简洁,效果却非常炫酷,小伙伴们学会了吗?

Javascript 相关文章推荐
JS控制表格隔行变色
Jun 26 Javascript
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 #Javascript
浅谈Javascript Base64 加密解密
Dec 28 #Javascript
JavaScript设计模式之代理模式介绍
Dec 28 #Javascript
JavaScript设计模式之外观模式介绍
Dec 28 #Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 #Javascript
jQuery中removeData()方法用法实例
Dec 27 #Javascript
jQuery中data()方法用法实例
Dec 27 #Javascript
You might like
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
关于svn冲突的解决方法
2013/06/21 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
秋季运动会稿件
2014/01/30 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
五四青年节的活动方案
2014/08/20 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
学校运动会广播稿
2014/10/11 职场文书
党小组鉴定意见
2015/06/02 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
学校学期工作总结
2015/08/13 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android