html5自动换图,html5教你做炫酷的碎片式图片切换 (canvas)

前言

老规矩，先上源码。图片区域是可以点击的，动画会从点击的位置开始发生。

本来这个效果是我3年前做的，只是当是是用无数个 div 标签完成的，性能比较成问题，在移动端完全跑不动。最近心血来潮想学习一个做 CSS 效果很厉害的大神用纯 CSS 实现，无奈功力不够只能放弃，最终选择用 canvas 来完成了。

准备工作

1. 首先准备相同尺寸的图片若干张，本例中图片尺寸均为 1920 * 1080(注意：这里的尺寸是原始图片的尺寸，不是通过 css 显示在页面上的尺寸)。为方便之后的使用，将这些图片加入 HTML 中一隐藏元素里备用。

.hide {

display: none;

}

2. 在 HTML 中插入 canvas 画布，尺寸自定，但必须保证与图片资源宽高比一致。本例中画布尺寸为 800 * 450。

您的浏览器不支持 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, wid