前言今天分享一个炫酷的碎片式切图效果 ， 这个其实在自己的之前的博客上有实现过 ， 本人觉得这个效果还是挺炫酷的，这次还是用我们的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)【教你用canvas打造一个炫酷的碎片切图效果】这个方法一共有9个参数，作用是在画布上绘制图像 。看到这么多参数是不是已经被劝退了，哈哈
- image：绘制到上下文的元素 。允许任何的画布图像源 ， 例如：
HTMLImageElement、SVGImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas或VideoFrame。 - sx：（可?。┬枰嬷频侥勘晟舷挛闹械模?code>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 参数语法中 。 - 1 人人都懂的HTML基础知识-HTML教程
- 小米手表Color2怎么连接手机_连接手机方法教程
- 我的世界创造模式怎么骑马，骑马方式详解（在我的世界里面怎么教我们骑马)
- 我的世界怎么骑马?我的世界骑马教程（我的世界怎么能骑马)
- 如何修改微信密码（怎样修改微信密码教程)
- 29 《吐血整理》高级系列教程-吃透Fiddler抓包教程-Fiddler如何抓取Android7.0以上的Https包-终篇
- 广东划拳口诀还要教我怎样玩（广西划拳十句口诀)
- 前端图形:SVG与Canvas
- 传奇私服怎么盗号啊?教教我吧!谢谢啦（传奇手游私服)
- disco diffusionAI绘画保姆级入门教程
