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

举报
命运之光 发表于 2023/08/08 22:18:03 2023/08/08
【摘要】 HTML5,canvas创作科技感粒子特效（科技感粒子、js鼠标跟随、粒子连线）

​

 ✨博主：命运之光 

🌸专栏：Python星辰秘典

🐳专栏：web开发（简单好用又好看）

❤️专栏：Java经典程序设计

☀️博主的其他文章：点击进入博主的主页

前言：欢迎踏入我的Web项目专栏，一段神奇而令人陶醉的数字世界！

🌌在这里，我将带您穿越时空，揭开属于Web的奥秘。通过HTML、CSS和JavaScript的魔力，我创造了一系列令人惊叹的Web项目，它们仿佛是从梦境中涌现而出。

🌌在这个专栏中，您将遇到华丽的界面，如流星划过夜空般迷人；您将感受到动态的交互，如魔法般让您沉浸其中；您将探索响应式设计的玄妙，让您的屏幕变幻出不同的绚丽景象。

🌌无论您是一个探险家还是一位嗜血的代码巫师，这个专栏将成为您的魔法书。我将分享每个项目的秘密，解开编码的谜题，让您也能够拥有制作奇迹的力量。

🌌准备好了吗？拿起您的键盘，跟随我的指引，一起进入这个神秘而充满惊喜的数字王国。在这里，您将找到灵感的源泉，为自己创造出一段奇幻的Web之旅！

​


目录

科技感粒子特效网页

动态图展示

静态图展示

图1 

图2 

视频展示

项目代码解析

HTML 结构

JavaScript 代码

项目完整代码

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本 

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件（大功告成(●'◡'●)）

结语

科技感粒子特效网页

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

动态图展示

​


静态图展示

图1 

​

图2 

​
​

视频展示

f327c05270ba4ba0b35fedae508abd3e-00002.jpg?auth_key=4843359125-0-0-fb376f54b9815c37642f7d473aed55a4

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中。代码的主要功能包括：

  1. 创建粒子和连线的类。
  2. 初始化粒子数组，并在画布上绘制粒子。
  3. 根据鼠标的位置更新粒子的运动状态，并绘制粒子之间的连线。
  4. 实现动画效果，使粒子和连线随着时间不断更新。
​
<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>

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本 

​

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

​

🍓3.打开html文件（大功告成(●'◡'●)）

​

结语

本章的内容就到这里了，觉得对你有帮助的话就支持一下博主把~

🌌点击下方个人名片，交流会更方便哦~
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

​

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Canvas HTML HTML5 JavaScript
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入