javascript Canvas动态粒子连线动态粒子连线
好久没写博客了,最近负责了公司年会的大屏签到、滚动抽奖、节目投票,整个项目做下来有惊也有喜。期间用到了Canvas
制作动画,我这边就简单做了个动态粒子连线的例子与大家分享。
一、效果图一、效果图
二、思路如下:二、思路如下:
1.绘制随机区域的粒子,记录每个粒子x轴、y轴坐标以及x轴与y轴每次移动的距离
2.通过定时函数使得粒子进行移动,移动后判断是否超过界限,超过则将该粒子删除并生成一个新的粒子
3.判断所有粒子之间的距离,对给定距离的粒子进行连线。
三、代码如下:三、代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas动态粒子连线</title>
</head>
<body>
评论0