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

时间:2017-08-15

前言

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

本来这个效果是我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。

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

分格

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

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

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

  • 共3页:
  • 上一篇1/3
  • 下一页
  • 上一篇:基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例 下一篇:H5 canvas实现贪吃蛇小游戏

    相关文章

    最新文章