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 相关文章推荐
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
js实现碰撞检测
Jan 29 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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
递归列出所有文件和目录
2006/10/09 PHP
php+dbfile开发小型留言本
2006/10/09 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
vue实现文件上传功能
2018/08/13 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
Python2/3中urllib库的一些常见用法
2017/12/19 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
python热力图实现简单方法
2021/01/29 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
目标管理责任书
2014/04/15 职场文书
园林技术专业求职信
2014/07/28 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL