html5碎片式圖片切換有什么制作方法？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。
為通許等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及通許網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、通許網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
前言
老規(guī)矩，先上源碼。圖片區(qū)域是可以點(diǎn)擊的，動(dòng)畫(huà)會(huì)從點(diǎn)擊的位置開(kāi)始發(fā)生。
本來(lái)這個(gè)效果是我3年前做的，只是當(dāng)是是用無(wú)數(shù)個(gè) p 標(biāo)簽完成的，性能比較成問(wèn)題，在移動(dòng)端完全跑不動(dòng)。最近心血來(lái)潮想學(xué)習(xí)一個(gè)做 CSS 效果很厲害的大神用純 CSS 實(shí)現(xiàn)，無(wú)奈功力不夠只能放棄，最終選擇用 canvas 來(lái)完成了。
準(zhǔn)備工作
1. 首先準(zhǔn)備相同尺寸的圖片若干張，本例中圖片尺寸均為 1920 * 1080（注意：這里的尺寸是原始圖片的尺寸，不是通過(guò) css 顯示在頁(yè)面上的尺寸）。為方便之后的使用，將這些圖片加入 HTML 中一隱藏元素里備用。
重慶分公司
重慶分公司
.hide {
display: none;
}
2. 在 HTML 中插入 canvas 畫(huà)布，尺寸自定，但必須保證與圖片資源寬高比一致。本例中畫(huà)布尺寸為 800 * 450。
3. 基礎(chǔ)代碼如下，首先獲取畫(huà)布的 context 對(duì)象；其次獲取圖片對(duì)象；最后通過(guò) drawImage 方法將圖片繪制出來(lái)。
var ctx = document.querySelector('#myCanvas').getContext('2d'),
img = document.querySelector('.img');
ctx.beginPath();
ctx.drawImage(img, 0, 0);
ctx.closePath();
ctx.stroke();
實(shí)現(xiàn)
相信很多人看完很快就能明白，這是用若干個(gè)小的單元組合在一起，每個(gè)單元只負(fù)責(zé)繪制圖片的一小部分，最后拼在一起就成了一張完整的圖片。
那么在具體講解源碼之前，先讓我們來(lái)復(fù)習(xí)一下 canvas 中 drawImage 函數(shù)的用法。由于我們需要用到該函數(shù)9個(gè)參數(shù)的情況，參數(shù)較多，需要牢記這些參數(shù)的意義和參考的對(duì)象。
context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
· img：規(guī)定要使用的圖像、畫(huà)布或視頻
· sx：開(kāi)始剪切的 x 坐標(biāo)位置
· sy：開(kāi)始剪切的 y 坐標(biāo)位置
· swidth：被剪切圖像的寬度
· sheight：被剪切圖像的高度
· x：在畫(huà)布上放置圖像的 x 坐標(biāo)位置
· y：在畫(huà)布上放置圖像的 y 坐標(biāo)位置
· width：要使用的圖像的寬度
· height：要使用的圖像的高度
我相信即使將上面這些參數(shù)羅列出來(lái)，在開(kāi)發(fā)的時(shí)候還是很容易暈。這里推薦給大家一個(gè)小技巧：除去第一個(gè) img 參數(shù)以外還有8個(gè)參數(shù)，其中前4個(gè)參數(shù)的尺寸參考的對(duì)象是原圖，即 1920 * 1080；后4個(gè)參數(shù)的尺寸參考的對(duì)象是畫(huà)布，即 800 * 450。
記住這個(gè)口訣，在實(shí)際編寫(xiě)的時(shí)候就不容易暈了。
分格
分格是要定下在畫(huà)布中一個(gè)單元的尺寸，最重要的是單元尺寸可以被畫(huà)面的兩條邊長(zhǎng)所整除，即單元尺寸應(yīng)為畫(huà)面寬高的公約數(shù)。公約數(shù)不一定是最大公約數(shù)或最小公約數(shù)，因?yàn)檫^(guò)大效果不夠炫，過(guò)小性能會(huì)有壓力。
以本例畫(huà)板 800 * 450 的尺寸為例，我這里選取 25 * 25 為單元尺寸，即整個(gè)畫(huà)布由 32 * 18 共 576 個(gè)單元格組成。分好格之后我們需要先計(jì)算一些基本的參數(shù)備用。
var imgW = 1920, //圖片原始寬/高
imgH = 1080;
var conW = 800, //畫(huà)布寬/高
conH = 450;
var dw = 25, //畫(huà)布單元格寬/高
dh = 25;
var I = conH / dh, //單元行/列數(shù)
J = conW / dw;
var DW = imgW / J, //原圖單元格寬/高
DH =imgH / I;
前三組參數(shù)是我們之前定下的，需要注意的，在算第四組行/列數(shù)時(shí)要清楚：行數(shù) = 畫(huà)布高度 / 單元格高度；列數(shù) = 畫(huà)面寬度 / 單元格寬度。如果這點(diǎn)搞反了，后面就蒙逼了。最后一組 DW/DH 是放大換算到原圖上的單元格尺寸，用于后面裁切圖片使用。
繪制
循序漸進(jìn)，我們先繪制最左上角的那個(gè)單元格。因?yàn)槠?code>原圖裁切位置與畫(huà)布擺放位置都是 (0, 0)，所以最簡(jiǎn)單。
ctx.drawImage(img, 0, 0, DW, DH, 0, 0, dw, dh);
成功了。那現(xiàn)在要繪制第2行，第3列的圖片該怎么寫(xiě)呢。
var i = 2,
j = 3;
ctx.drawImage(img, DW*j, DH*i, DW, DH, dw*j, dh*i, dw, dh);
這里容易搞混的是：裁剪或擺放的橫坐標(biāo)為單元格寬度 * 列號(hào)，縱坐標(biāo)為單元格高度 * 行號(hào)。
為了方便，封裝一個(gè)負(fù)責(zé)渲染的純凈函數(shù)，其不參與邏輯，只會(huì)根據(jù)傳入的圖片對(duì)象及坐標(biāo)進(jìn)行繪制。
function handleDraw(img, i, j) {
ctx.drawImage(img, DW*j, DH*i, DW, DH, dw*j, dh*i, dw, dh);
}
封裝好渲染方法之后，通過(guò)行數(shù)和列數(shù)的雙重循環(huán)把整張圖片渲染出來(lái)。
ctx.beginPath();
for (var i = 0; i < I; i ++) {
for (var j = 0; j < J; j ++) {
handleDraw(img, i, j);
}
}
ctx.closePath();
ctx.stroke();
完美~。其實(shí)到這一步核心部分就完成了，為什么呢？因?yàn)榇藭r(shí)這幅圖片已經(jīng)是由幾百個(gè)單元格拼合而成的，大家可以憑借天馬行空的想像賦予其動(dòng)畫(huà)效果。
在分享自己的動(dòng)畫(huà)算法之前，先給大家看下拼錯(cuò)是什么樣的~
還有點(diǎn)炫酷~
動(dòng)畫(huà)算法
下面分享下我的動(dòng)畫(huà)算法。Demo 里的效果是怎么實(shí)現(xiàn)的呢？
由于在畫(huà)布的網(wǎng)格上，每個(gè)單元格都有行列號(hào)（i，j）。我希望能給出一個(gè)坐標(biāo)（i，j）后，從近到遠(yuǎn)依次得出坐標(biāo)周圍所有菱形上的點(diǎn)。具體如下圖，懶得做圖了~
比如坐標(biāo)為（3，3）
距離為 1 的點(diǎn)有（2，3）、（3，4）、（4，3）、（3，2）共4個(gè)；
距離為 2 的點(diǎn)有（1，3）、（2，4）、（3，5）、（4，4）、（5，3）、（4，2）、（3，1）、（2，2）共8個(gè)；
........
求出這一系列點(diǎn)的算法也很容易， 因?yàn)榱庑尉€上的點(diǎn)與坐標(biāo)的 行號(hào)差值的絕對(duì)值 + 列號(hào)差值的絕對(duì)值 = 距離，具體如下：
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;
}
該函數(shù)用于給定坐標(biāo)和距離（dst），求出坐標(biāo)周圍該距離上的所有點(diǎn)，以數(shù)組的形式返回。但是上面的算法少了邊界限制，完整如下：
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;
}
這樣我們就有了一個(gè)計(jì)算周圍固定距離上所有點(diǎn)的純凈函數(shù)，接下來(lái)就開(kāi)始完成動(dòng)畫(huà)渲染了。
首先編寫(xiě)一個(gè)用于清除單元格內(nèi)容的清除函數(shù)，只需要傳入坐標(biāo)，就能清除該坐標(biāo)單元格上的內(nèi)容，等待之后繪制新的圖案。
handleClear(i, j) {
ctx.clearRect(dw*j, dh*i, dw, dh);
}
anotherImg 為下一張圖，最后通過(guò) 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);
當(dāng) countAround 返回的數(shù)組長(zhǎng)度為0，即到坐標(biāo)點(diǎn)該距離上的所有點(diǎn)都在邊界之外了，就停止定時(shí)器循環(huán)。至此所有核心代碼已經(jīng)介紹完畢，具體實(shí)現(xiàn)請(qǐng)查看源碼。
現(xiàn)在給定畫(huà)布上任意坐標(biāo)，就能從該點(diǎn)開(kāi)始向四周擴(kuò)散完成碎片式的圖片切換效果。
在自動(dòng)輪播時(shí)，每次從預(yù)設(shè)好的8個(gè)點(diǎn)（四個(gè)角及四條邊的中點(diǎn)）開(kāi)始動(dòng)畫(huà)，8個(gè)點(diǎn)坐標(biāo)如下：
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
}]
點(diǎn)擊時(shí)，則算出點(diǎn)擊所在單元格坐標(biāo)，從該點(diǎn)開(kāi)始動(dòng)畫(huà)。
function handleClick(e) {
var offsetX = e.offsetX,
offsetY = e.offsetY,
j = Math.floor(offsetX / dw),
i = Math.floor(offsetY / dh),
//有了i, j，開(kāi)始動(dòng)畫(huà)...
},
看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。
