教你做炫酷的碎片式图片切换 (canvas) - Daryl_H5之家

前言

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

本来这个效果是我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, width, height);

· img：规定要使用的图像、画布或视频

· sx：开始剪切的 x 坐标位置

· sy：开始剪切的 y 坐标位置

· swidth：被剪切图像的宽度

· sheight：被剪切图像的高度

· x：在画布上放置图像的 x 坐标位置

· y：在画布上放置图像的 y 坐标位置

· width：要使用的图像的宽度

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

我相信即使将上面这些参数罗列出来，在开发的时候还是很容易晕。这里推荐给大家一个小技巧：除去第一个 img 参数以外还有8个参数，其中前4个参数的尺寸参考的对象是原图，即 1920 * 1080；后4个参数的尺寸参考的对象是画布，即 800 * 450。

记住这个口诀，在实际编写的时候就不容易晕了。

分格

分格是要定下在画布中一个单元的尺寸，最重要的是单元尺寸可以被画面的两条边长所整除，即单元尺寸应为画面宽高的公约数。公约数不一定是最大公约数或最小公约数，因为过大效果不够炫，过小性能会有压力。

以本例画板 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;