html5教你做炫酷的碎片式图片切换 (canvas)

时间：2017-08-15

成功了。那现在要绘制第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();

html5教你做炫酷的碎片式图片切换 (canvas)

完美~。其实到这一步核心部分就完成了，为什么呢？因为此时这幅图片已经是由几百个单元格拼合而成的，大家可以凭借天马行空的想像赋予其动画效果。

在分享自己的动画算法之前，先给大家看下拼错是什么样的~

html5教你做炫酷的碎片式图片切换 (canvas)

还有点炫酷~

动画算法

下面分享下我的动画算法。Demo 里的效果是怎么实现的呢？

由于在画布的网格上，每个单元格都有行列号（i，j）。我希望能给出一个坐标（i，j）后，从近到远依次得出坐标周围所有菱形上的点。具体如下图，懒得做图了~

html5教你做炫酷的碎片式图片切换 (canvas)

比如坐标为（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
}]

共3页:

2/3

上一篇：基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例 下一篇：H5 canvas实现贪吃蛇小游戏

html5教你做炫酷的碎片式图片切换 (canvas)

相关文章

最新文章