html粒子动画效果设置为背景,canvas粒子动画背景的实现示例

效果 :)

不带连线效果：

带连线的效果：

教程

要实现这样的效果其实很简单，大概分为这么几个步骤：

创建canvas

首先需要在需要展示粒子背景的父元素中创建一个canvas标签, 指定width和height, 在我们生成随机点坐标的时候需要用width和height来做参照。width和height等于父元素的宽和高。

// 假如父元素是body

const ele = document.body;

const canvas = document.createElement('canvas');

canvas.width = ele.clientWidth;

canvas.height = ele.clientHeight;

// 将canvas标签插入

ele.appendChild(canvas);

随机生成一定数量的点坐标信息

以width和height做参照随机生成一定数量的点坐标信息，包含x, y, rateX(点在X轴的移动速率), rateY(点在Y轴移动的速率), rateX和r