您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 移动前端 >> 浏览设计教程

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

前言

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

原本这个结果是我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 阶段,有空的话会将该结果插件化,方便有爱好的同伙使用。

以上就是本文的悉数内容,盼望对大家的学习有所帮助,也盼望大家多多支持图趣网。

[教程作者:Daryl]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/Tutorial/wd414.html
基于HTML5陀螺仪实现ofo首页眼睛移动结果的示例
H5 canvas实现贪吃蛇小游戏
图趣网微信
建议反馈