记住这个口诀，在实际编写的时候就不容易晕了。
分格
分格是要定下在画布中一个单元的尺寸，最重要的是单元尺寸可以被画面的两条边长所整除，即单元尺寸应为画面宽高的公约数。公约数不一定是最大公约数或最小公约数，因为过大效果不够炫，过小性能会有压力。
以本例画板 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); |
成功了。那现在要绘制第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(); |
完美~。其实到这一步核心部分就完成了，为什么呢？因为此时这幅图片已经是由几百个单元格拼合而成的，大家可以凭借天马行空的想像赋予其动画效果。
在分享自己的动画算法之前，先给大家看下拼错是什么样的~
