html5+canvas+九宫格,javascript+canvas制作九宫格小程序

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 demo

使用方法：

//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

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

html5+canvas+九宫格,javascript+canvas制作九宫格小程序相关推荐

Canvas 动画引擎解析与微信小程序中的应用
点击观看大咖分享抗击疫情,腾讯云在行动.在开发微信小程序的过程中,我们经常需要展现一些图形和图表.目前市面上有好几款常用的图形库,在这些图形库的底层都有渲染引擎在支撑. ZRender 是其中一款非 ...
首发全DIY强大微信朋友圈截图制作生成小程序源码下载点赞,评论等等
这是一款朋友圈截图制作的一款小程序源码主要的特点是DIY,之前小编发布过朋友圈截图的小程序不管之前那款小程序只能生成点赞数量,无法获取用户名等等但是这一款就不一样了,这一款刚刚也说了特点是DIY ...
DIY微信朋友圈截图制作生成小程序源码下载
这是一款朋友圈截图制作的一款小程序源码主要的特点是DIY,之前小编发布过朋友圈截图的小程序不管之前那款小程序只能生成点赞数量,无法获取用户名等等但是这一款就不一样了,这一款刚刚也说了特点是DIY ...
小程序源码：首发全DIY强大微信朋友圈截图制作生成小程序
这是一款朋友圈截图制作的一款小程序源码主要的特点是DIY,之前小编发布过朋友圈截图的小程序不管之前那款小程序只能生成点赞数量,无法获取用户名等等但是这一款就不一样了,这一款刚刚也说了特点是DIY ...
谷歌开发者大会焦点：TensorFlow.js可制作微信小程序，Android 10原生支持5G，TF2.0大更新...
2016 年谷歌开发者大会在中国首次举办,2017 年谷歌宣布成立"AI 中国研发中心",2018年谷歌的"AI+小程序"的产物"猜画小歌" ...
【微信小程序】可拖拽操作的“树状图”模块的制作和小程序经验的总结
去年三月份高中同学拉我做的微信小程序,尽管可能除了高一的时候做网页写过些js以后就再也没碰过(甚至高一时因为觉得"以后肯定不会做程序员"而拒绝学习代码),但得到了"你就写 ...
怎样自己开发制作微信小程序？费用多少？
随着移动互联网的深入发展,各行各业都在寻求转型,希望通过线上软件系统来助力传统企业更好的发展,于是各种APP.小程序软件系统层出不穷.微信小程序是诸多软件中最流行的一种,凭借强大的流量基础.随用随走的 ...
都2020年，开发制作微信小程序商城，需要准备什么资料？应该不会不知道吧！
微信小程序使用越来越广泛,而还未入局的对于微信小程序开发需要什么材料甚至不清楚,其实这些材料很简单.总结就是微信支付.微信小程序注册.小程序代码,下面展开说说. 小程序红利从腾讯刚发布的财报看,微信 ...
如何制作python检查小软件_如何用Python制作整蛊小程序
原标题:如何用Python制作整蛊小程序下面的整蛊程序,千万不要发代码,否则就实现不了你整蛊的目的了.完成后一定要打包成一个exe程序,再发给朋友使用 . 1. 使用 pip install pyi ...
一般一个前端项目完成需要多久_制作分销小程序最快要多久
小猪V5分销小程序小编了解到,微商城及微分销搭建成为当下热门话题,下面从多个方面来谈谈快速制作电商小程序最快要多久. 微信为小程序开放了超过60多个入口,比如有微信群聊入口.微信聊天主界面下拉.App ...

html5+canvas+九宫格,javascript+canvas制作九宫格小程序

html5+canvas+九宫格,javascript+canvas制作九宫格小程序相关推荐

最新文章

热门文章