html5如何实现碎片式图片切换-创新互联
这篇文章主要为大家展示了“html5如何实现碎片式图片切换”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html5如何实现碎片式图片切换”这篇文章吧。
创新互联公司是专业的利津网站建设公司,利津接单;提供成都网站制作、网站建设、外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行利津网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!准备工作
1. 首先准备相同尺寸的图片若干张,本例中图片尺寸均为 1920 * 1080(注意:这里的尺寸是原始图片的尺寸,不是通过 css 显示在页面上的尺寸)。为方便之后的使用,将这些图片加入 HTML 中一隐藏元素里备用。
.hide { display: none; }
2. 在 HTML 中插入 canvas 画布,尺寸自定,但必须保证与图片资源宽高比一致。本例中画布尺寸为 800 * 450。
3. 基础代码如下,首先获取画布的 context 对象;其次获取图片对象;最后通过 drawImage 方法将图片绘制出来。
var ctx = document.querySelector('#myCanvas').getContext('2d'), img = document.querySelector('.img'); ctx.beginPath(); ctx.drawImage(img, 0, 0); ctx.closePath(); ctx.stroke();
实现
相信很多人看完很快就能明白,这是用若干个小的单元组合在一起,每个单元只负责绘制图片的一小部分,最后拼在一起就成了一张完整的图片。
那么在具体讲解源码之前,先让我们来复习一下 canvas 中 drawImage 函数的用法。由于我们需要用到该函数9个参数的情况,参数较多,需要牢记这些参数的意义和参考的对象。
context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
img:规定要使用的图像、画布或视频
sx:开始剪切的 x 坐标位置
sy:开始剪切的 y 坐标位置
swidth:被剪切图像的宽度
sheight:被剪切图像的高度
x:在画布上放置图像的 x 坐标位置
y:在画布上放置图像的 y 坐标位置
width:要使用的图像的宽度
height:要使用的图像的高度
我相信即使将上面这些参数罗列出来,在开发的时候还是很容易晕。这里推荐给大家一个小技巧:除去第一个 img 参数以外还有8个参数,其中前4个参数的尺寸参考的对象是原图,即 1920 * 1080;后4个参数的尺寸参考的对象是画布,即 800 * 450。
记住这个口诀,在实际编写的时候就不容易晕了。
分格
分格是要定下在画布中一个单元的尺寸,最重要的是单元尺寸可以被画面的两条边长所整除,即单元尺寸应为画面宽高的公约数。公约数不一定是较大公约数或最小公约数,因为过大效果不够炫,过小性能会有压力。
以本例画板 800 * 450 的尺寸为例,我这里选取 25 * 25 为单元尺寸,即整个画布由 32 * 18 共 576 个单元格组成。分好格之后我们需要先计算一些基本的参数备用。
var imgW = 1920, //图片原始宽/高 imgH = 1080; var conW = 800, //画布宽/高 conH = 450; var dw = 25, //画布单元格宽/高 dh = 25; var I = conH / dh, //单元行/列数 J = conW / dw; var DW = imgW / J, //原图单元格宽/高 DH =imgH / I;
前三组参数是我们之前定下的,需要注意的,在算第四组行/列数时要清楚:行数 = 画布高度 / 单元格高度;列数 = 画面宽度 / 单元格宽度
。如果这点搞反了,后面就蒙逼了。最后一组 DW/DH 是放大换算到原图上的单元格尺寸,用于后面裁切图片使用。
绘制
循序渐进,我们先绘制最左上角的那个单元格。因为其原图裁切位置
与画布摆放位置
都是 (0, 0),所以最简单。
ctx.drawImage(img, 0, 0, DW, DH, 0, 0, dw, dh);
成功了。那现在要绘制第2行,第3列的图片该怎么写呢。
var i = 2, j = 3; ctx.drawImage(img, DW*j, DH*i, DW, DH, dw*j, dh*i, dw, dh);
这里容易搞混的是:裁剪或摆放的横坐标为单元格宽度 * 列号,纵坐标为单元格高度 * 行号
。
为了方便,封装一个负责渲染的纯净函数,其不参与逻辑,只会根据传入的图片对象及坐标进行绘制。
function handleDraw(img, i, j) { ctx.drawImage(img, DW*j, DH*i, DW, DH, dw*j, dh*i, dw, dh); }
封装好渲染方法之后,通过行数和列数的双重循环把整张图片渲染出来。
ctx.beginPath(); for (var i = 0; i < I; i ++) { for (var j = 0; j < J; j ++) { handleDraw(img, i, j); } } ctx.closePath(); ctx.stroke();
完美~。其实到这一步核心部分就完成了,为什么呢?因为此时这幅图片已经是由几百个单元格拼合而成的,大家可以凭借天马行空的想像赋予其动画效果。
在分享自己的动画算法之前,先给大家看下拼错是什么样的~
还有点炫酷~
动画算法
下面分享下我的动画算法。Demo 里的效果是怎么实现的呢?
由于在画布的网格上,每个单元格都有行列号(i,j)。我希望能给出一个坐标(i,j)后,从近到远依次得出坐标周围所有菱形上的点。具体如下图,懒得做图了~
比如坐标为(3,3)
距离为 1 的点有(2,3)、(3,4)、(4,3)、(3,2)共4个;
距离为 2 的点有(1,3)、(2,4)、(3,5)、(4,4)、(5,3)、(4,2)、(3,1)、(2,2)共8个;
........
求出这一系列点的算法也很容易, 因为菱形线上的点与坐标的行号差值的绝对值 + 列号差值的绝对值 = 距离
,具体如下:
function countAround(i, j, dst) { var resArr = []; for (var m = (i-dst); m <= (i+dst); m++) { for (var n = (j-dst); n <= (j+dst); n++) { if ((Math.abs(m-i) + Math.abs(n-j) == dst)) { resArr.push({x: m, y: n}); } } } return resArr; }
该函数用于给定坐标和距离(dst),求出坐标周围该距离上的所有点,以数组的形式返回。但是上面的算法少了边界限制,完整如下:
countAround(i, j, dst) { var resArr = []; for (var m = (i-dst); m <= (i+dst); m++) { for (var n = (j-dst); n <= (j+dst); n++) { if ((Math.abs(m-i) + Math.abs(n-j) == dst) && (m >=0 && n >= 0) && (m <= (I-1) && n <= (J-1))) { resArr.push({x: m, y: n}); } } } return resArr; }
这样我们就有了一个计算周围固定距离上所有点的纯净函数,接下来就开始完成动画渲染了。
首先编写一个用于清除单元格内容的清除函数,只需要传入坐标,就能清除该坐标单元格上的内容,等待之后绘制新的图案。
handleClear(i, j) { ctx.clearRect(dw*j, dh*i, dw, dh); }
anotherImg 为下一张图,最后通过 setInterval 不断向外层绘制新的图片完成碎片式的渐变效果。
var dst = 0, intervalObj = setInterval(function() { var resArr = countAround(i, j, dst); resArr.forEach(function(item, index) { handleClear(item.x, item.y); handleDraw(anotherImg, item.x, item.y); }); if (!resArr.length) { clearInterval(intervalObj); } dst ++; }, 20);
当 countAround 返回的数组长度为0,即到坐标点该距离上的所有点都在边界之外了,就停止定时器循环。至此所有核心代码已经介绍完毕,具体实现请查看源码。
现在给定画布上任意坐标,就能从该点开始向四周扩散完成碎片式的图片切换效果。
在自动轮播时,每次从预设好的8个点(四个角及四条边的中点)开始动画,8个点坐标如下:
var randomPoint = [{ x: 0, y: 0 }, { x: I - 1, y: 0 }, { x: 0, y: J - 1 }, { x: I - 1, y: J - 1 }, { x: 0, y: Math.ceil(J / 2) }, { x: I - 1, y: Math.ceil(J / 2) }, { x: Math.ceil(I / 2), y: 0 }, { x: Math.ceil(I / 2), y: J - 1 }]
点击时,则算出点击所在单元格坐标,从该点开始动画。
function handleClick(e) { var offsetX = e.offsetX, offsetY = e.offsetY, j = Math.floor(offsetX / dw), i = Math.floor(offsetY / dh), //有了i, j,开始动画... },
以上是“html5如何实现碎片式图片切换”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
分享文章:html5如何实现碎片式图片切换-创新互联
网址分享:http://pwwzsj.com/article/cdhphh.html