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

日期：2021-02-23 类型：科技新闻我要分享

关键词：商城网站建设，微商好助手，微商引流，电商网站模板，微信商家小程序

序言

规矩，先上源代码。照片地区是能够点一下的，动漫会从点一下的部位刚开始产生。

原本这个实际效果是我3年前做的，只是当是是用无数个 div 标识进行的，特性较为成难题，在挪动端彻底跑没动。近期心力来潮想学习培训1个做 CSS 实际效果很强大的高手用纯 CSS 完成，无可奈何功力不足只能舍弃，最后挑选用 canvas 来进行了。

提前准备工作中

1. 最先提前准备同样规格的照片若干张，本例中照片规格均为 1920 * 1080（留意：这里的规格是初始照片的规格，并不是根据 css 显示信息在网页页面上的规格）。为便捷以后的应用，将这些照片添加 HTML 中1掩藏元素里备用。

<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 画布，规格自定，但务必确保与照片資源宽高比1致。本例中画布规格为 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();

完成

坚信许多人看完很快就可以搞清楚，这是用若干个小的模块组成在1起，每一个模块只负责绘图照片的1小一部分，最终拼在1起就变成1张详细的照片。

那末在实际解读源代码以前，先让大家来备考1下 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：要应用的图象的高宽比

我坚信即便将上面这些主要参数列举出来，在开发设计的情况下還是很非常容易晕。这里强烈推荐给大伙儿1个小窍门：去除第1个 img 主要参数之外也有8个主要参数，在其中前4个主要参数的规格参照的目标是原图，即 1920 * 1080；后4个主要参数的规格参照的目标是画布，即 800 * 450。

记牢这个口诀，在具体撰写的情况下就不可易晕了。

分格

分格是要定下在画布中1个模块的规格，最关键的是模块规格能够被画面的两条边长所整除，即模块规格应为画面宽高的条例数。条例数不1定是最大条例数或最少条例数，由于过大实际效果不足炫，太小特性会有工作压力。

以本例画板 800 * 450 的规格为例，我这里选择 25 * 25 为模块规格，即全部画布由 32 * 18 共 576 个模块格构成。分好格以后大家必须先测算1些基础的主要参数备用。

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;

前3组主要参数是大家以前定下的，必须留意的，在算第4组行/列数时要清晰：行数 = 画布高宽比 / 模块格高宽比；列数 = 画面宽度 / 模块格宽度。假如这点搞反了，后边就蒙逼了。最终1组 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);

这里非常容易弄混的是：剪裁或放置的横座标为模块格宽度 * 列号，纵座标为模块格高宽比 * 行号。

以便便捷，封裝1个负责3D渲染的纯净涵数，其不参加逻辑性，只会依据传入的照片目标及座标开展绘图。

function handleDraw(img, i, j) {
    ctx.drawImage(img, DW*j, DH*i, DW, DH, dw*j, dh*i, dw, dh);
}

封裝好3D渲染方式以后，根据行数和列数的双向循环系统把整张照片3D渲染出来。

ctx.beginPath();

for (var i = 0; i < I; i ++) {
    for (var j = 0; j < J; j ++) {
        handleDraw(img, i, j);
    }
}

ctx.closePath();
ctx.stroke();

完善~。实际上到这1步关键一部分就进行了，为何呢？由于此时这幅照片早已是由几百个模块格拼合而成的，大伙儿能够凭着宏昌行空的想象授予其动漫实际效果。

在共享自身的动漫优化算法以前，先给大伙儿看下拼错是甚么样的~

也有点酷炫~

动漫优化算法

下面共享下我的动漫优化算法。Demo 里的实际效果是如何完成的呢？

因为在画布的网格上，每一个模块格都有队伍号（i，j）。我期待能得出1个座标（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个；

........

求出这1系列点的优化算法也很非常容易，由于菱形网上的点与座标的 行号差值的肯定值 + 列号差值的肯定值 = 间距，实际以下：

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⑴) && n <= (J⑴))) {
                resArr.push({x: m, y: n});
            }
        }
    }
    return resArr;
}

这样大家就有了1个测算周边固定不动间距上全部点的纯净涵数，接下来就刚开始进行动漫3D渲染了。

最先撰写1个用于消除模块格內容的消除涵数，只必须传入座标，就可以消除该座标模块格上的內容，等候以后绘图新的图案设计。

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

anotherImg 为下1张图，最终根据 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，即到座标点该间距上的全部点都在界限以外了，就终止定时执行器循环系统。至此全部关键编码早已详细介绍结束，实际完成请查询源代码。

如今给定画布就任意座标，就可以从该点刚开始向4周外扩散进行碎片式的照片切换实际效果。

在全自动轮播时，每次从预设好的8个点（4个角及4条边的中点）刚开始动漫，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 环节，有时间的话会将该实际效果软件化，便捷有兴趣爱好的盆友应用。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：HTML5仿手机微信闲聊页面、手机微信盆友圈案例编返回下一篇：没有了