js+canvas实现网站背景鼠标吸附线条动画

2023年6月11日上午12:34 • JavaScript

实现网站背景鼠标吸附线条动画可以使用js+canvas技术实现，具体过程如下：

设计思路

使用canvas创建一个全屏的画布。
监听鼠标移动事件，实时获取鼠标的坐标位置。
创建一个数组存储所有的点，每个点有一定的速度，通过一个定时器不断的移动这些点，形成连续的轨迹。
每一个点的位置在不停地变动，需要实时计算每个点与鼠标的距离，并在一定范围内绘制一条线条连接两个点。
使用一个定时器不断地调用绘制函数，实现动画效果。

实现步骤

1. 创建画布

首先我们需要在html文件中创建一个canvas元素，用来绘制背景动画。

<canvas id="bg-canvas"></canvas>

接着，我们在JS文件中获取该canvas元素，设置画布宽度和高度，并获取画布上下文。

const canvas = document.getElementById('bg-canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

2. 监听鼠标事件

我们需要在canvas上监听鼠标移动事件，实时获取鼠标的坐标位置。

let mouse = {
  x: 0,
  y: 0
};

function onMove(e) {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
}
canvas.addEventListener('mousemove', onMove);

3. 创建点动画效果

我们可以随机生成若干个点，并将这些点存储在一个数组中。

const POINTS_NUM = 150;
const points = [];
const SPEED = 0.2;

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.speed = SPEED;
    this.radius = 1;
    this.color = '#fff';
  }

  draw() {
    ctx.beginPath();
    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fill();
  }

  move() {
    this.x += this.speed * (Math.random() - 0.5);
    this.y += this.speed * (Math.random() - 0.5);

    if (this.x < 0 || this.x > canvas.width) {
      this.x = Math.random() * canvas.width;
      this.y = Math.random() * canvas.height;
    }

    if (this.y < 0 || this.y > canvas.height) {
      this.x = Math.random() * canvas.width;
      this.y = Math.random() * canvas.height;
    }
  }
}

for (let i = 0; i < POINTS_NUM; i++) {
  points.push(new Point(Math.random() * canvas.width, Math.random() * canvas.height));
}

在每一个帧中，我们需要先清空画布，然后绘制每个点。为了实现连线的效果，还需要计算每个点与鼠标的距离，当两个点的距离小于一定的阈值时，就使用线条连接这两个点。

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < points.length; i++) {
    points[i].move();
    points[i].draw();
    for (let j = i + 1; j < points.length; j++) {
      let dx = points[i].x - points[j].x;
      let dy = points[i].y - points[j].y;
      let distance = Math.sqrt(dx * dx + dy * dy);
      if (distance < 100) {
        ctx.beginPath();
        ctx.strokeStyle = `rgba(255, 255, 255, ${(100 - distance) / 100})`;
        ctx.moveTo(points[i].x, points[i].y);
        ctx.lineTo(points[j].x, points[j].y);
        ctx.stroke();
      }
    }

    let dx = points[i].x - mouse.x;
    let dy = points[i].y - mouse.y;
    let distance = Math.sqrt(dx * dx + dy * dy);
    if (distance < 50) {
      ctx.beginPath();
      ctx.strokeStyle = `rgba(255, 255, 255, ${(50 - distance) / 50})`;
      ctx.moveTo(points[i].x, points[i].y);
      ctx.lineTo(mouse.x, mouse.y);
      ctx.stroke();
    }
  }
  requestAnimationFrame(draw);
}
draw();

在以上的代码中，我们使用了ES6中的class关键字来定义了一个Point类，该类包含了每个点的坐标、速度、半径、颜色等属性，以及在画布上绘制该点的方法draw()和让该点移动的方法move()。同时，我们还使用了递归方式的requestAnimationFrame函数来绘制整个动画。当然，也可以使用setInterval定时器来实现。

示例1

上述代码是实现网站背景中鼠标吸附线条动画的一种思路，下面还有一个基于同样的思路的示例：

【DEMO】

在这个示例中，我们随机生成了200个点，每个点会不断地移动，并绘制在canvas上。当鼠标与某个点的距离小于一定阈值时，我们就在两个点之间绘制一条线条，而鼠标则处于线条终点的位置。通过这样的方式，我们可以在鼠标和点之间形成一道道连续的光芒，从而实现一个炫酷的背景效果。

示例2

下面还有一个来源于Codepen的示例，同样基于了类似的思路，通过鼠标与点之间绘制带有烟花效果的线条，实现了一个更具创意和艺术感的动态背景效果。