❤️创意网页：HTML5,canvas创作科技感粒子特效（科技感粒子、js鼠标跟随、粒子连线）

命运之光

发布于 2024-03-20 12:38:26

3290

发布于 2024-03-20 12:38:26

科技感粒子特效网页

在本篇技术博客中，我们将学习如何创建一个令人赞叹的科技感粒子特效网页。这个特效网页将会展示一个动态的、精美的粒子效果，同时会随着鼠标的移动而产生连线效果，增添一份炫酷的科技氛围。我们将使用HTML、CSS和JavaScript来实现这个效果。

动态图展示

静态图展示

图1

图2

视频展示

HTML5粒子连接

项目代码解析

HTML 结构

首先，我们来看一下HTML结构。代码中只有一个<canvas>元素，这是我们用来绘制粒子特效的画布。我们也可以通过给<canvas>元素设置背景图片来增加更多的效果。

<!DOCTYPE html>
<html>
<head>
  <title>科技感粒子特效网页</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
      background-image: url("your_background_image_url.jpg"); /* 替换成你自己的背景图片URL */
      background-size: cover;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas"></canvas>
  <script>
    // JavaScript 代码将在这里添加
  </script>
</body>
</html>

JavaScript 代码

现在，让我们来详细解析JavaScript代码部分。这里使用了<script>标签将JavaScript代码嵌入到HTML中。代码的主要功能包括：

创建粒子和连线的类。
初始化粒子数组，并在画布上绘制粒子。
根据鼠标的位置更新粒子的运动状态，并绘制粒子之间的连线。
实现动画效果，使粒子和连线随着时间不断更新。


<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
  const width = window.innerWidth;
  const height = window.innerHeight;

  canvas.width = width;
  canvas.height = height;

  const particles = [];
  const connections = [];
  const particleCount = 300;   // 粒子数量
  const particleSpeed = 1;     // 粒子移动速度
  const particleSize = 2;      // 粒子大小
  const maxDistance = 100;     // 粒子连线的最大距离
  const lightningColor = "#fff"; // 粒子连线的颜色

  // 创建粒子类
  class Particle {
    constructor() {
      this.x = Math.random() * width;
      this.y = Math.random() * height;
      this.color = "#fff";
      this.angle = Math.random() * 360;
      this.speed = Math.random() * particleSpeed;
      this.opacity = Math.random() * 0.5 + 0.5;
    }

    update() {
      this.x += Math.cos(this.angle) * this.speed;
      this.y += Math.sin(this.angle) * this.speed;

      // 如果粒子超出画布范围，则重新随机设置位置
      if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {
        this.x = Math.random() * width;
        this.y = Math.random() * height;
      }
    }

    draw() {
      ctx.beginPath();
      ctx.arc(this.x, this.y, particleSize, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
      ctx.fill();
    }
  }

  // 创建粒子数组
  function createParticles() {
    for (let i = 0; i < particleCount; i++) {
      particles.push(new Particle());
    }
  }

  // 绘制粒子之间的连线
  function drawConnections() {
    for (let i = 0; i < particles.length; i++) {
      for (let j = i + 1; j < particles.length; j++) {
        const dx = particles[i].x - particles[j].x;
        const dy = particles[i].y - particles[j].y;
        const distance = Math.sqrt(dx * dx + dy * dy);

        if (distance < maxDistance) {
          ctx.beginPath();
          ctx.moveTo(particles[i].x, particles[i].y);
          ctx.lineTo(particles[j].x, particles[j].y);
          ctx.strokeStyle = lightningColor;
          ctx.lineWidth = 0.2 * (1 - distance / maxDistance);
          ctx.stroke();
          ctx.closePath();
        }
      }
    }
  }

  // 动画循环
  function animate() {
    ctx.clearRect(0, 0, width, height);

    for (const particle of particles) {
      particle.update();
      particle.draw();
    }

    drawConnections();

    requestAnimationFrame(animate);
  }

  // 监听鼠标移动事件，根据鼠标位置更新粒子运动状态
  document.addEventListener("mousemove", (e) => {
    const mouseX = e.clientX;
    const mouseY = e.clientY;

    for (const particle of particles) {
      const dx = mouseX - particle.x;
      const dy = mouseY - particle.y;
      const distance = Math.sqrt(dx * dx + dy * dy);

      if (distance < maxDistance) {
        particle.angle = Math.atan2(dy, dx);
        particle.speed = 5;
      } else {
        particle.speed = Math.random() * particleSpeed;
      }
    }
  });

  // 初始化粒子数组并启动动画
  createParticles();
  animate();
</script>

项目完整代码

<!DOCTYPE html>
<html>
<head>
  <title>科技感粒子特效网页</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
      background-image: url("your_background_image_url.jpg");
      background-size: cover;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas"></canvas>

  <script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    const width = window.innerWidth;
    const height = window.innerHeight;

    canvas.width = width;
    canvas.height = height;

    const particles = [];
    const connections = [];
    const particleCount = 300;
    const particleSpeed = 1;
    const particleSize = 2;
    const maxDistance = 100;
    const lightningColor = "#fff";

    class Particle {
      constructor() {
        this.x = Math.random() * width;
        this.y = Math.random() * height;
        this.color = "#fff";
        this.angle = Math.random() * 360;
        this.speed = Math.random() * particleSpeed;
        this.opacity = Math.random() * 0.5 + 0.5;
      }

      update() {
        this.x += Math.cos(this.angle) * this.speed;
        this.y += Math.sin(this.angle) * this.speed;

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

      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, particleSize, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
        ctx.fill();
      }
    }

    function createParticles() {
      for (let i = 0; i < particleCount; i++) {
        particles.push(new Particle());
      }
    }

    function drawConnections() {
      for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
          const dx = particles[i].x - particles[j].x;
          const dy = particles[i].y - particles[j].y;
          const distance = Math.sqrt(dx * dx + dy * dy);

          if (distance < maxDistance) {
            ctx.beginPath();
            ctx.moveTo(particles[i].x, particles[i].y);
            ctx.lineTo(particles[j].x, particles[j].y);
            ctx.strokeStyle = lightningColor;
            ctx.lineWidth = 0.2 * (1 - distance / maxDistance);
            ctx.stroke();
            ctx.closePath();
          }
        }
      }
    }

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

      for (const particle of particles) {
        particle.update();
        particle.draw();
      }

      drawConnections();

      requestAnimationFrame(animate);
    }

    document.addEventListener("mousemove", (e) => {
      const mouseX = e.clientX;
      const mouseY = e.clientY;

      for (const particle of particles) {
        const dx = mouseX - particle.x;
        const dy = mouseY - particle.y;
        const distance = Math.sqrt(dx * dx + dy * dy);

        if (distance < maxDistance) {
          particle.angle = Math.atan2(dy, dx);
          particle.speed = 5;
        } else {
          particle.speed = Math.random() * particleSpeed;
        }
      }
    });

    createParticles();
    animate();
  </script>
</body>
</html>