我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript利用canvas实现炫酷的碎片切图效果

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

JavaScript利用canvas实现炫酷的碎片切图效果

前言

今天分享一个炫酷的碎片式切图效果,这个其实在自己的之前的博客上有实现过,本人觉得这个效果还是挺炫酷的,这次还是用我们的canvas来实现,代码量不多,但有些地方还是需要花点时间去理解的,需要点数学几何理解能力,老规矩,我们还是先看效果再来看实现步骤。

需求分析

从上面我们看到图片在切换的时候其实是一个一个的小碎片慢慢从点击位置往外扩散开来,这一个个小碎片,在页面中其实就是一个个的小方块。这里的难点在于如何将一张完整的图片切割成一个一个的小方块分别进行渲染,还有就是这个棱形图案的位置确定。

  • 切割:这里我们可以以坐标系的形式来进行切割,每一个方块都对应着它们自己在坐标系中的位置(x, y)
  • 绘制:这里的重点在于drawImage方法
  • 棱形扩散:这里需要点数学几何理解能力,后面作图理解

实现过程

坐标系

在实现之前,我们先来理解一个概念:「坐标系」

注意:这里所说的坐标系不是我们数学中的坐标系,但两者又有些类似,不同点在于两者的原点位置以及y轴的方向不同。

切割

这一步主要是为了确定每一个单元格的大小,单元格的长宽最好不要是最大公约数或最小公约数,因为过大效果不够炫,过小性能会有压力。

我这里画板长宽为 800 * 530 ,选取 16 * 15 为单元尺寸,即整个画布由 50 * 35 共 1750 个单元格组成。切割分完单元格之后我们需要先计算一些基本的参数备用。

this.imgW = 800; // 图片原始宽
this.imgH = 530; // 图片原始高

this.conW = 800; // 画布宽
this.conH = 530; //  画布高

this.dw = 16; // 单元格宽
this.dh = 15; // 单元格高

this.I = this.conH / this.dh; //单元行数
this.J = this.conW / this.dw; // 单元列数

this.DW = this.imgW / this.J; // 原图单元宽
this.DH = this.imgH / this.I; // 原图单元高

「行数 = 画布高度 / 单元格高度;列数 = 画面宽度 / 单元格宽度」

绘制

本次绘制的重点在于drawImage这个方法,我们可以先来了解一下这个方法的参数及功能

drawImage

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

这个方法一共有9个参数,作用是在画布上绘制图像。看到这么多参数是不是已经被劝退了,哈哈

  • 「image」:绘制到上下文的元素。允许任何的画布图像源,例如:HTMLImageElementSVGImageElementHTMLVideoElementHTMLCanvasElementImageBitmapOffscreenCanvas或 VideoFrame 。
  • 「sx」:(可选)需要绘制到目标上下文中的,image 的矩形(裁剪)选择框的左上角 X 轴坐标。可以使用 3 参数或 5 参数语法来省略这个参数。
  • 「s y」:(可选)需要绘制到目标上下文中的,image 的矩形(裁剪)选择框的左上角 Y 轴坐标。可以使用 3 参数或 5 参数语法来省略这个参数。
  • 「sWidth」:(可选)需要绘制到目标上下文中的,image 的矩形(裁剪)选择框的宽度。如果不说明,整个矩形(裁剪)从坐标的 sx 和 sy 开始,到 image 的右下角结束。可以使用 3 参数或 5 参数语法来省略这个参数。使用负值将翻转这个图像。
  • 「sHeight」:(可选)需要绘制到目标上下文中的,image的矩形(裁剪)选择框的高度。使用负值将翻转这个图像。
  • 「dx」image 的左上角在目标画布上 X 轴坐标。
  • 「dy」image 的左上角在目标画布上 Y 轴坐标。
  • 「dWidth」image 在目标画布上绘制的宽度。允许对绘制的 image 进行缩放。如果不说明,在绘制时 image 宽度不会缩放。注意,这个参数不包含在 3 参数语法中。
  • 「dHeight」image 在目标画布上绘制的高度。允许对绘制的 image 进行缩放。如果不说明,在绘制时 image 高度不会缩放。注意,这个参数不包含在 3 参数语法中。

这9个参数我们可以这样来记忆,第一个参数是图像源,接下来的四个参数指的是原图,最后四个参数指的是画布

切割&渲染

这里我们主要是将一张图片切割成一个个的小碎片,是这些碎片拼起来就是一张完整的图片。

class ChipBanner {
  constructor() {
    this.cvs = document.querySelector("#chip");
    this.ctx = this.cvs.getContext("2d");
    this.imgList = document.querySelectorAll(".bg");
    this.imgIndex = 0;
    this.isAnimating = false;

    this.imgW = 800; //图片原始宽/高
    this.imgH = 530;

    this.conW = 800; //画布宽/高
    this.conH = 530;

    this.dw = 16; //画布单元宽/高
    this.dh = 15;

    this.I = this.conH / this.dh; //单元行/列数
    this.J = this.conW / this.dw;

    this.DW = this.imgW / this.J; //原图单元宽/高
    this.DH = this.imgH / this.I;
  }

  init() {
    this.ctx.beginPath();

    for (let i = 0; i < this.I; i++) {
      for (let j = 0; j < this.J; j++) {
        this.chipDraw(this.imgList[this.imgIndex], i, j);
      }
    }

    this.ctx.closePath();
    this.ctx.stroke();
  }
  drawText() {
    this.ctx.font = "150px serif";
    this.ctx.strokeStyle = "white";
    this.ctx.strokeText("1024", 500, 500);
  }

  chipDraw(img, i, j) {
    this.drawText();
    //负责绘制,i: 单元行号;j: 单元列号
    this.ctx.drawImage(
      img,
      this.DW * j,
      this.DH * i,
      this.DW,
      this.DH,
      this.dw * j,
      this.dh * i,
      this.dw,
      this.dh
    );
  }
}

这里正确拼出来看到的和正常图片没有任何区别

再来看一张拼错的图

刚开始几何坐标那里没写对,拼出来就成这样了,哈哈,看着就像动画帧卡住的样子。

动画

这里主要是要找出某个点周围棱形范围内的所有点的坐标,然后在清除这些坐标图案的同时,开始绘制下一张图片。

「菱形线上的点与坐标的 行号差值的绝对值 + 列号差值的绝对值 = 距离」

找出坐标棱形范围内所有的点

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

清除单元格画布

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

合并&动画

start(i, j) {
    if (this.isAnimating) return;

    this.isAnimating = true;

    this.imgIndex++;

    if (this.imgIndex > this.imgList.length - 1) this.imgIndex = 0;

    let _this = this,
      dst = 0,
      timer = setInterval(() => {
        let resArr = _this.countAround(i, j, dst);

        resArr.forEach((item) => {
          _this.chipClear(item.x, item.y);  // 清除单元格
          _this.chipDraw(_this.imgList[_this.imgIndex], item.x, item.y); // 绘制下一张图片
        });

        if (!resArr.length) {
          clearInterval(timer);
          _this.isAnimating = false;
        }
        dst++;
      }, 30);
  }

大功告成,这样就实现了一个炫酷的碎片式切图效果了~

到此这篇关于JavaScript利用canvas实现炫酷的碎片切图效果的文章就介绍到这了,更多相关JavaScript canvas碎片切图效果内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript利用canvas实现炫酷的碎片切图效果

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JavaScript利用canvas实现炫酷的碎片切图效果

这篇文章主要和大家分享一个炫酷的碎片式切图效果,本文主要利用canvas来实现,代码量不多,但有些地方还是需要花点时间去理解的,感兴趣的可以学习一下
2022-11-13

JavaScript+Canvas实现酷炫的粒子和流星效果

这篇文章主要为大家详细介绍了如何利用JavaScript和Canvas实现酷炫的粒子和流星动画效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-01-31

怎么用HTML5的canvas实现一个炫酷时钟效果

小编给大家分享一下怎么用HTML5的canvas实现一个炫酷时钟效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!对于H5来说,canvas可以说是它最有特色的一
2023-06-09

利用JavaScript实现静态图片局部流动效果

如果你有玩过《王者荣耀》、《阴阳师》 等手游,一定注意到过它的启动动画、皮肤立绘卡片等场景,经常采用静态底图加局部液态流动效果的简单动画,本文将利用JavaScript实现这一效果,需要的可以参考一下
2022-11-13

利用纯css实现图片翻转的效果

这篇文章将为大家详细讲解有关利用纯css实现图片翻转的效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。实现效果图如下直接上代码吧1, body部分代码如下:
2023-06-08

利用CSS、JavaScript及Ajax实现高效的图片预加载

图片预加载想必大家都不陌生吧,实现预加载图片有很多方法,包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案,十分高效
2022-11-15

利用CSS实现响应式图片轮播效果的教程

利用CSS实现响应式图片轮播效果的教程随着移动设备的普及和技术的进步,响应式网站设计已成为当今设计趋势之一。在设计过程中,图片轮播是常见的元素之一,它可以有效地向用户展示多张图片的信息。本教程将分享如何使用CSS实现响应式图片轮播效果,并提
利用CSS实现响应式图片轮播效果的教程
2023-11-21

利用CSS实现图片悬浮效果的技巧和方法

在网页设计中,图片悬浮效果是一种常见且吸引眼球的设计方式。通过悬浮效果,可以让用户在鼠标悬浮在图片上时,出现一些动画效果、文字说明或者其他有趣的交互效果。本文将介绍一些利用CSS实现图片悬浮效果的技巧和方法,并提供具体的代码示例。放大效果通
2023-10-21

编程热搜

目录