前言
老规矩，先上源码。图片区域是可以点击的，动画会从点击的位置开始发生。
本来这个效果是我3年前做的，只是当是是用无数个 div 标签完成的，性能比较成问题，在移动端完全跑不动。最近心血来潮想学习一个做 CSS 效果很厉害的大神用纯 CSS 实现，无奈功力不够只能放弃，最终选择用 canvas 来完成了。
准备工作
1. 首先准备相同尺寸的图片若干张，本例中图片尺寸均为 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. 基础代码如下，首先获取画布的 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。
