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

网页制作 2024/12/28 佚名

3 2 1

帝王谷资源网 Design By www.wdxyy.com

前言

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

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

成功了。那现在要绘制第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();

完美~。其实到这一步核心部分就完成了，为什么呢？因为此时这幅图片已经是由几百个单元格拼合而成的，大家可以凭借天马行空的想像赋予其动画效果。

在分享自己的动画算法之前，先给大家看下拼错是什么样的~

还有点炫酷~

动画算法

下面分享下我的动画算法。Demo 里的效果是怎么实现的呢？

由于在画布的网格上，每个单元格都有行列号（i，j）。我希望能给出一个坐标（i，j）后，从近到远依次得出坐标周围所有菱形上的点。具体如下图，懒得做图了~

比如坐标为（3，3）

距离为 1 的点有（2，3）、（3，4）、（4，3）、（3，2）共4个；

距离为 2 的点有（1，3）、（2，4）、（3，5）、（4，4）、（5，3）、（4，2）、（3，1）、（2，2）共8个；

........

求出这一系列点的算法也很容易，因为菱形线上的点与坐标的 行号差值的绝对值 + 列号差值的绝对值 = 距离，具体如下：

function countAround(i, j, dst) {
    var resArr = [];
    for (var m = (i-dst); m <= (i+dst); m++) {
        for (var n = (j-dst); n <= (j+dst); n++) {
            if ((Math.abs(m-i) + Math.abs(n-j) == dst)) {
                resArr.push({x: m, y: n});
            }
        }
    }
    return resArr;
}

该函数用于给定坐标和距离（dst），求出坐标周围该距离上的所有点，以数组的形式返回。但是上面的算法少了边界限制，完整如下：

countAround(i, j, dst) {
    var resArr = [];
    for (var m = (i-dst); m <= (i+dst); m++) {
        for (var n = (j-dst); n <= (j+dst); n++) {
            if ((Math.abs(m-i) + Math.abs(n-j) == dst) && (m >=0 && n >= 0) && (m <= (I-1) && n <= (J-1))) {
                resArr.push({x: m, y: n});
            }
        }
    }
    return resArr;
}

这样我们就有了一个计算周围固定距离上所有点的纯净函数，接下来就开始完成动画渲染了。

首先编写一个用于清除单元格内容的清除函数，只需要传入坐标，就能清除该坐标单元格上的内容，等待之后绘制新的图案。

handleClear(i, j) {
    ctx.clearRect(dw*j, dh*i, dw, dh);
}

anotherImg 为下一张图，最后通过 setInterval 不断向外层绘制新的图片完成碎片式的渐变效果。

var dst = 0,
intervalObj = setInterval(function() {
    var resArr = countAround(i, j, dst);

    resArr.forEach(function(item, index) {
        handleClear(item.x, item.y);
        handleDraw(anotherImg, item.x, item.y);
    });
        
    if (!resArr.length) {
        clearInterval(intervalObj);
    }
    dst ++;
}, 20);

当 countAround 返回的数组长度为0，即到坐标点该距离上的所有点都在边界之外了，就停止定时器循环。至此所有核心代码已经介绍完毕，具体实现请查看源码。

现在给定画布上任意坐标，就能从该点开始向四周扩散完成碎片式的图片切换效果。

在自动轮播时，每次从预设好的8个点（四个角及四条边的中点）开始动画，8个点坐标如下：

var randomPoint = [{
    x: 0,
    y: 0
}, {
    x: I - 1,
    y: 0
}, {
    x: 0,
    y: J - 1
}, {
    x: I - 1,
    y: J - 1
}, {
    x: 0,
    y: Math.ceil(J / 2)
}, {
    x: I - 1,
    y: Math.ceil(J / 2)
}, {
    x: Math.ceil(I / 2),
    y: 0
}, {
    x: Math.ceil(I / 2),
    y: J - 1
}]

点击时，则算出点击所在单元格坐标，从该点开始动画。

function handleClick(e) {
    var offsetX = e.offsetX,
    　　offsetY = e.offsetY,
    　　j = Math.floor(offsetX / dw),
    　　i = Math.floor(offsetY / dh),
    
    //有了i, j，开始动画...    
},

目前该效果只是 Demo 阶段，有空的话会将该效果插件化，方便有兴趣的朋友使用。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

canvas图片碎片化切换,h5图片切换炫酷效果,canvas页面炫酷切换

标签：

canvas图片碎片化切换,h5图片切换炫酷效果,canvas页面炫酷切换

帝王谷资源网 Design By www.wdxyy.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

帝王谷资源网 Design By www.wdxyy.com

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

暂无评论...

www.wdxyy.com 帝王谷资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

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

canvas图片碎片化切换,h5图片切换炫酷效果,canvas页面炫酷切换

基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例

H5 canvas实现贪吃蛇小游戏

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

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

canvas图片碎片化切换,h5图片切换炫酷效果,canvas页面炫酷切换

基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例

H5 canvas实现贪吃蛇小游戏

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

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存