网页设计，最重要的就是漂亮，尤其是那些H5页面，各种花样儿层出不穷，看得你眼花缭乱。下面我们就来学习下怎么做出那种超级炫酷的照片切换特效-碎片式。看到照片像是被撕碎又粘好，是不是觉得很有意思？别着急，我这就告诉你怎么做，不过还有几点需要注意！
一、图片的准备与布局
首先要先准备好几张跟你要上传的照片差不多大的图片，像我这张1920*1080的就可以了。选图时要小心，网上看到的那些显示出来的大小可能不太准确。这么做的话，你传上去的照片会更加清晰亮眼，不会再模糊不清。
搞定了，接下来咱们要做的是嵌进HTML里面，等你要用到这些图片时，他们就能立马跑出来，而且你的网页运行速度也会快上一倍！
.hide {
display: none;
}
二、创建Canvas画布
想让照片变得好玩点吗？在HTML里面加个Canvas就行！Canvas的大小随你调整，不过要注意跟图片差不多大，这样图片才不会被拉伸或缩小。
您的浏览器不支持 CANVAS
搞定画布之后，咱们要去找个叫做”context”的东西。这玩意儿是Canvas的灵魂，有了它你就能画出独一无二的酷炫图形了。接下来，就是大显身手的时候，展示图片破碎变化的震撼效果！
var ctx = document.querySelector('#myCanvas').getContext('2d'),
img = document.querySelector('.img');
ctx.beginPath();
ctx.drawImage(img, 0, 0);
ctx.closePath();
ctx.stroke();
三、理解drawImage函数的用法
Canvas上那个叫drawImage的功能挺牛的，可以直接在上面画东西。用这个功能要注意几个点，首先要有图，然后要知道画在哪儿，还有大小尺寸这些细节也不能忽视。想做那种图片随便换的效果？那就得把所有的9个参数都考虑进去哟。
记住~第一次出现的4个数表示原始图像的尺寸，之后看出来的4个是参考画布的大小。用drawImage做图案时，别忘记对照这几个数值哦～
context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
四、封装渲染函数
弄个专门画图的函数呗，这样修修补补方便多了，代码也更易读。这个函数，你告诉它怎么画，剩下的就让它搞定，别再找它干别的活儿，也别让它去做。这么一搞，代码干净利落，好查好改。
做好渲染后，咱们就来动手画图！总共分两步，先画横线再画竖线，这样整个画面就搞定了！关键在于，每个小格子怎么画，心里要有谱。别忘了，循环可是个好帮手，能让你轻松完成这个大工程~
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;
五、实现碎片式渐变效果
把这几个步骤做好之后，喂饱了setInterval这个家伙就能让他不停地画出新图。这样子，碎片式的渐变效果就出来记得，速度和感觉要把握好，别忘了让画面流畅起来哟~
咋？CountAround没电了是吗？就是说那些线外面的点全跑掉了哈？那咱们就让计时有休息会儿！这样就不用担心它整天乱转，界面也是运转得更加顺畅~
ctx.drawImage(img, 0, 0, DW, DH, 0, 0, dw, dh);
六、动画的起始点
咱们设置了自动轮播，每次都会从八个固定位子动起来，也就是四个角落和四边中间那几个地方。你们放心这个我们早就搞定了，这样可保证动画效果整洁流畅！
轻点屏幕就能看出你在哪儿戳的，然后直接从那儿动起来。重点是你得知道自己在哪戳的，这样才能决定该往哪走。
var i = 2, j = 3; ctx.drawImage(img, DW*j, DH*i, DW, DH, dw*j, dh*i, dw, dh);
七、未来的展望
这个功能，目前是演示版的，不过我打算把它做成插件，这样你们需要就可以随时用了。而且做成插件之后和其他软件搭配起来更容易，开发者们也能提高效率哟~
搞好了！现在教大家弄个帅呆的H5图片翻页效果。看着挺好使的，其实得花点功夫。这篇教程希望能帮到你们？不懂的地方就在下面说哈。记得，觉得好就分享一下呗，给个赞也很不错！
function handleDraw(img, i, j) {
ctx.drawImage(img, DW*j, DH*i, DW, DH, dw*j, dh*i, dw, dh);
}
评论0