神奇的canvas——点与线绘制的绚丽动画效果

最新推荐文章于 2024-08-15 10:23:35 发布

findhappy117

最新推荐文章于 2024-08-15 10:23:35 发布

阅读量1.3w

点赞数 3

文章标签：动画 canvas

本文链接：https://blog.csdn.net/findhappy117/article/details/79491531

版权

本文介绍了一个使用canvas实现的点线动画效果，通过 Dot 类创建点并控制其移动，实现点与点之间的连线及鼠标交互。文章详细讲解了canvas绘制点、线的API，以及如何通过requestAnimFrame实现平滑动画。还讨论了如何处理鼠标点击和移动事件，以及性能优化策略，包括限制点的数量和自动移除旧点。

摘要由CSDN通过智能技术生成

代码地址如下：
http://www.demodashi.com/demo/11636.html

前言

之前在某网站上看到了一个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; // 单位时间纵向移动距离
};