如何用JavaScript和canvas制作出酷炫的碎片化长尾词动态效果？

本文共计2200个文字，预计阅读时间需要9分钟。

目录+前言+需求分析+实现过程+坐标系统+切割+绘制+切割渲染+动画+前言+今日分享+展示一个炫酷的碎片式切图效果，这个效果其实在自己的博客上已有实现，个人觉得这个效果还是挺炫酷的。

目录

• 前言
• 需求分析
• 实现过程
• 坐标系
• 切割
• 绘制
• 切割&渲染
• 动画

前言

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

需求分析

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