前言
之前在某网站上看到了一个canvas绘制的动画效果,虽然组成的元素很简单,只有点和线,但是视觉效果却非常炫丽,当下就非常想自己把他实现一遍。因为工作原因这个想法搁置了一段时间,前不久忽然想起来,就抽空完成了这个demo,下面是demo的截图,想要看动态效果的小伙伴可以戳旁边的链接:canvas绘制绚丽的点线动画效果
运行效果图
下面就简单介绍一下完成这个demo的思路
需要掌握的基础知识
- canvas绘制点与线的api
- 理解JavaScript中“类”
需求分析
- 点随机产生并向随机方向以随机的速度匀速移动
- 未点击时,点的总数保持不变;点击时在点击的位置产生数个新的点
- 点与点之间在一定距离内有细线连接
- 鼠标在画面中移动时,能够与其他点产生互动
编写代码(文章末尾有源码)
点的实现
由于在整个demo中需要使用到大量的点,所以使用一个Dot类来负责产生点的实例以及这个点的所有行为
// 声明一个Dot对象
var Dots = function () {
this.canvas; // canvas节点
this.ctx; // canvas绘图上下文
this.x; // 横向坐标
this.y; // 纵向坐标
this.r; // dot半径
this.sx; // 单位时间水平移动距离
this.sy; // 单位时间纵向移动距离
};