前言

老規(guī)矩，先上源碼。圖片區(qū)域是可以點(diǎn)擊的，動(dòng)畫會(huì)從點(diǎn)擊的位置開始發(fā)生。

本來這個(gè)效果是我3年前做的，只是當(dāng)是是用無數(shù)個(gè) div 標(biāo)簽完成的，性能比較成問題，在移動(dòng)端完全跑不動(dòng)。最近心血來潮想學(xué)習(xí)一個(gè)做 CSS 效果很厲害的大神用純 CSS 實(shí)現(xiàn)，無奈功力不夠只能放棄，最終選擇用 canvas 來完成了。

準(zhǔn)備工作

1. 首先準(zhǔn)備相同尺寸的圖片若干張，本例中圖片尺寸均為 1920 * 1080（注意：這里的尺寸是原始圖片的尺寸，不是通過 css 顯示在頁面上的尺寸）。為方便之后的使用，將這些圖片加入 HTML 中一隱藏元素里備用。

<div 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' />
</div>

.hide {
    display: none;
}

2. 在 HTML 中插入 canvas 畫布，尺寸自定，但必須保證與圖片資源寬高比一致。本例中畫布尺寸為 800 * 450。

<canvas id="myCanvas" width="800" height="450">您的瀏覽器不支持 CANVAS</canvas>

3. 基礎(chǔ)代碼如下，首先獲取畫布的 context 對(duì)象；其次獲取圖片對(duì)象；最后通過 drawImage 方法將圖片繪制出來。

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é)繪制圖片的一小部分，最后拼在一起就成了一張完整的圖片。

那么在具體講解源碼之前，先讓我們來復(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ī)定要使用的圖像、畫布或視頻

· sx：開始剪切的 x 坐標(biāo)位置

· sy：開始剪切的 y 坐標(biāo)位置

· swidth：被剪切圖像的寬度

· sheight：被剪切圖像的高度

· x：在畫布上放置圖像的 x 坐標(biāo)位置

· y：在畫布上放置圖像的 y 坐標(biāo)位置

· width：要使用的圖像的寬度

· height：要使用的圖像的高度

我相信即使將上面這些參數(shù)羅列出來，在開發(fā)的時(shí)候還是很容易暈。這里推薦給大家一個(gè)小技巧：除去第一個(gè) img 參數(shù)以外還有8個(gè)參數(shù)，其中前4個(gè)參數(shù)的尺寸參考的對(duì)象是原圖，即 1920 * 1080；后4個(gè)參數(shù)的尺寸參考的對(duì)象是畫布，即 800 * 450。

記住這個(gè)口訣，在實(shí)際編寫的時(shí)候就不容易暈了。

分格

分格是要定下在畫布中一個(gè)單元的尺寸，最重要的是單元尺寸可以被畫面的兩條邊長(zhǎng)所整除，即單元尺寸應(yīng)為畫面寬高的公約數(shù)。公約數(shù)不一定是最大公約數(shù)或最小公約數(shù)，因?yàn)檫^大效果不夠炫，過小性能會(huì)有壓力。

以本例畫板 800 * 450 的尺寸為例，我這里選取 25 * 25 為單元尺寸，即整個(gè)畫布由 32 * 18 共 576 個(gè)單元格組成。分好格之后我們需要先計(jì)算一些基本的參數(shù)備用。

var imgW = 1920, //圖片原始寬/高
    imgH = 1080;

var conW = 800, //畫布寬/高
    conH = 450;

var dw = 25, //畫布單元格寬/高
    dh = 25;

var I = conH / dh, //單元行/列數(shù)
    J = conW / dw;

var DW = imgW / J, //原圖單元格寬/高
    DH =imgH / I;

前三組參數(shù)是我們之前定下的，需要注意的，在算第四組行/列數(shù)時(shí)要清楚：行數(shù) = 畫布高度 / 單元格高度；列數(shù) = 畫面寬度 / 單元格寬度。如果這點(diǎn)搞反了，后面就蒙逼了。最后一組 DW/DH 是放大換算到原圖上的單元格尺寸，用于后面裁切圖片使用。

繪制

循序漸進(jìn)，我們先繪制最左上角的那個(gè)單元格。因?yàn)槠?code>原圖裁切位置與畫布擺放位置都是 (0, 0)，所以最簡(jiǎn)單。

ctx.drawImage(img, 0, 0, DW, DH, 0, 0, dw, dh);