如何实现JavaScript Canvas上的动态粒子连线效果？

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

好久没写博客了，最近负责了公司年会的幕后筹备，包括大屏幕签到、滚动抽奖、节日门票，整个项目做下来也有惊也有喜。期间用到了Canvas制作动画，我这边简单做了个动态粒子连线的例子，跟家人分享了一下。

好久没写博客了，最近负责了公司年会的大屏签到、滚动抽奖、节目投票，整个项目做下来有惊也有喜。期间用到了Canvas制作动画，我这边就简单做了个动态粒子连线的例子与大家分享。

一、效果图

二、思路如下：

1.绘制随机区域的粒子，记录每个粒子x轴、y轴坐标以及x轴与y轴每次移动的距离

2.通过定时函数使得粒子进行移动，移动后判断是否超过界限，超过则将该粒子删除并生成一个新的粒子

3.判断所有粒子之间的距离，对给定距离的粒子进行连线。