1.H5如何做出碎片式的方法源方法切换

H5如何做出碎片式的切换

        这次给大家带来H5如何做出碎片式的切换，H5做出碎片式的方法源方法切换的注意事项有哪些，下面就是方法源方法实战案例，一起来看一下。方法源方法

       前言

       老规矩，方法源方法先上源码。方法源方法期货多空提示源码区域是方法源方法可以点击的，动画会从点击的方法源方法位置开始发生。

       本来这个效果是方法源方法我3年前做的，只是方法源方法当是是用无数个 p 标签完成的，性能比较成问题，方法源方法在移动端完全跑不动。方法源方法最近心血来潮想学习一个做 CSS 效果很厉害的方法源方法大神用纯 CSS 实现，无奈功力不够只能放弃，方法源方法最终选择用 canvas 来完成了。方法源方法

       准备工作

       1. 首先准备相同尺寸的ae 源码若干张，本例中尺寸均为 * （注意：这里的尺寸是原始的尺寸，不是通过 css 显示在页面上的尺寸）。为方便之后的使用，将这些加入 HTML 中一隐藏元素里备用。

       <p class='hide'>

        <img class='img' src='./images/a.jpg' />

        <img class='img' src='./images/b.jpg' />

        <img class='img' src='./images/c.jpg' />

        <img class='img' src='./images/d.jpg' />

        <img class='img' src='./images/e.jpg' />

       </p>.hide {

        display: none;

       }2. 在 HTML 中插入 canvas 画布，尺寸自定，但必须保证与资源宽高比一致。本例中画布尺寸为 * 。

       <canvas id="myCanvas" width="" height="">您的浏览器不支持 CANVAS</canvas>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();实现

       相信很多人看完很快就能明白，这是用若干个小的单元组合在一起，每个单元只负责绘制的一小部分，最后拼在一起就成了一张完整的。

       那么在具体讲解源码之前，iphone 源码先让我们来复习一下 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个参数的尺寸参考的对象是原图，即 * ；后4个参数的尺寸参考的对象是画布，即 * 。

       记住这个口诀，在实际编写的时候就不容易晕了。

       分格

       分格是要定下在画布中一个单元的尺寸，最重要的flash 游戏源码是单元尺寸可以被画面的两条边长所整除，即单元尺寸应为画面宽高的公约数。公约数不一定是最大公约数或最小公约数，因为过大效果不够炫，过小性能会有压力。

       以本例画板 * 的尺寸为例，我这里选取 * 为单元尺寸，即整个画布由 * 共 个单元格组成。分好格之后我们需要先计算一些基本的参数备用。

       var imgW = , //原始宽/高

        imgH = ;

       var conW = , //画布宽/高

        conH = ;

       var dw = , //画布单元格宽/高

        dh = ;

       var I = conH / dh, //单元行/列数

        J = conW / dw;

       var DW = imgW / J, //原图单元格宽/高

        DH =imgH / I;前三组参数是我们之前定下的，需要注意的，在算第四组行/列数时要清楚：行数 = 画布高度 / 单元格高度；列数 = 画面宽度 / 单元格宽度。如果这点搞反了，后面就蒙逼了。最后一组 DW/DH 是放大换算到原图上的单元格尺寸，用于后面裁切使用。php工具源码

       绘制

       循序渐进，我们先绘制最左上角的那个单元格。因为其原图裁切位置与画布摆放位置都是 (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 ++;

       }, );当 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，开始动画...

       },目前该效果只是 Demo 阶段，有空的话会将该效果插件化，方便有兴趣的朋友使用。

       相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

       推荐阅读：

       H5的window.postMessage与跨域

       H5的多线程（Worker SharedWorker）使用详解