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

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

感谢你的浏览，希望能有所帮助