html5碎片式图片切换制作办法详解-
前言
老规矩，先上源码。图片区域是可以点击的，动画会从点击的位置开端产生。
原来这个结果是我3年前做的，只是当是是用无数个 p 标签完成的，机能比拼成题目，在挪移端完全跑不动。比来血汗来潮想学习一个做 CSS 结果很厉害的大神用纯 CSS 实现，无奈功力不足只能舍弃，终究选中用 canvas 来完成了。
预备工作
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);
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();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 阶段，有空的话会将该结果插件化，利便有乐趣的伴侣运用。
以上就是html5碎片式图片切换制作办法详解的细致内容，更多请关注 百分百源码网 其它相干文章！
