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 相关文章推荐
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 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
DOMXML函数笔记
2006/10/09 PHP
php查看session内容的函数
2008/08/27 PHP
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
Mootools 1.2教程 事件处理
2009/09/15 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
python定向爬取淘宝商品价格
2018/02/27 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
2014年优秀班主任工作总结
2014/12/16 职场文书
工作岗位职责范本
2015/02/15 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
Go语言安装并操作redis的go-redis库
2022/04/14 Golang