javascript实现几何粒子星空连线背景效果

javascript实现几何粒子星空连线背景效果

<html>

<head>
  <meta charset="UTF-8">
  <title>几何星空连线背景</title>
  <script src="./ParticleBackground.js"></script>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script>
    const particleBackgroundInstance = new ParticleBackground();
    particleBackgroundInstance.initPoints();
    particleBackgroundInstance.drawFrame();

    /*
        // 可调参数
        // var BACKGROUND_COLOR = "rgba(255,255,255,0.6)";   // 背景颜色
        var BACKGROUND_COLOR = "rgba(0, 43, 54,1)";   // 背景颜色
        var POINT_NUM = 150;                        // 星星数目
        var POINT_COLOR = "rgba(255,255,255,1)";  // 点的颜色
        var LINE_LENGTH = 10000;                    // 点之间连线长度(的平方)
    
        // 创建背景画布
        var cvs = document.createElement("canvas");
        cvs.width = window.innerWidth;
        cvs.height = window.innerHeight;
        cvs.style.cssText = "\
         position:fixed;\
         top:0px;\
         left:0px;\
         z-index:-1;\
         opacity:1.0;\
         ";
        document.body.appendChild(cvs);
    
        var ctx = cvs.getContext("2d");
    
        var startTime = new Date().getTime();
    
        //随机数函数
        function randomInt(min, max) {
          return Math.floor((max - min + 1) * Math.random() + min);
        }
    
        function randomFloat(min, max) {
          return (max - min) * Math.random() + min;
        }
    
        //构造点类
        function Point() {
          this.x = randomFloat(0, cvs.width);
          this.y = randomFloat(0, cvs.height);
    
          var speed = randomFloat(0.3, 1.4);
          var angle = randomFloat(0, 2 * Math.PI);
    
          this.dx = Math.sin(angle) * speed;
          this.dy = Math.cos(angle) * speed;
    
          this.r = 1.2;
    
          this.color = POINT_COLOR;
        }
    
        Point.prototype.move = function () {
          this.x += this.dx;
          if (this.x < 0) {
            this.x = 0;
            this.dx = -this.dx;
          } else if (this.x > cvs.width) {
            this.x = cvs.width;
            this.dx = -this.dx;
          }
          this.y += this.dy;
          if (this.y < 0) {
            this.y = 0;
            this.dy = -this.dy;
          } else if (this.y > cvs.height) {
            this.y = cvs.height;
            this.dy = -this.dy;
          }
        }
    
        Point.prototype.draw = function () {
          ctx.fillStyle = this.color;
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
          ctx.closePath();
          ctx.fill();
        }
    
        var points = [];
    
        function initPoints(num) {
          for (var i = 0; i < num; ++i) {
            points.push(new Point());
          }
        }
    
        var p0 = new Point(); //鼠标
        p0.dx = p0.dy = 0;
        var degree = 2.5;
        document.onmousemove = function (ev) {
          p0.x = ev.clientX;
          p0.y = ev.clientY;
        }
        document.onmousedown = function (ev) {
          degree = 5.0;
          p0.x = ev.clientX;
          p0.y = ev.clientY;
        }
        document.onmouseup = function (ev) {
          degree = 2.5;
          p0.x = ev.clientX;
          p0.y = ev.clientY;
        }
        window.onmouseout = function () {
          p0.x = null;
          p0.y = null;
        }
    
        function drawLine(p1, p2, deg) {
          var dx = p1.x - p2.x;
          var dy = p1.y - p2.y;
          var dis2 = dx * dx + dy * dy;
          if (dis2 < 2 * LINE_LENGTH) {
            if (dis2 > LINE_LENGTH) {
              if (p1 === p0) {
                p2.x += dx * 0.03;
                p2.y += dy * 0.03;
              } else return;
            }
            var t = (1.05 - dis2 / LINE_LENGTH) * 0.2 * deg;
            ctx.strokeStyle = "rgba(255,255,255," + t + ")";
            ctx.beginPath();
            ctx.lineWidth = 1.5;
            ctx.moveTo(p1.x, p1.y);
            ctx.lineTo(p2.x, p2.y);
            ctx.closePath();
            ctx.stroke();
          }
          return;
        }
    
        //绘制每一帧
        function drawFrame() {
          cvs.width = window.innerWidth;
          cvs.height = window.innerHeight;
          ctx.fillStyle = BACKGROUND_COLOR;
          ctx.fillRect(0, 0, cvs.width, cvs.height);
    
          var arr = (p0.x == null ? points : [p0].concat(points));
          for (var i = 0; i < arr.length; ++i) {
            for (var j = i + 1; j < arr.length; ++j) {
              drawLine(arr[i], arr[j], 1.0);
            }
            arr[i].draw();
            arr[i].move();
          }
    
          window.requestAnimationFrame(drawFrame);
        }
    
        initPoints(POINT_NUM);
        drawFrame();
    */
  </script>
</body>

</html>
  • 封装的js方法库ParticleBackground.js
class Point {
  constructor(canvas, options) {
    this.canvas = canvas;
    this.ctx = canvas.getContext("2d");
    options = options || {};
    this.options = {
      pointColor: options.pointColor || "rgba(255,255,255,1)",
    };

    this.x = this.randomFloat(0, this.canvas.width);
    this.y = this.randomFloat(0, this.canvas.height);

    var speed = this.randomFloat(0.3, 1.4);
    var angle = this.randomFloat(0, 2 * Math.PI);

    this.dx = Math.sin(angle) * speed;
    this.dy = Math.cos(angle) * speed;

    this.r = 1.2;

    this.color = this.options.pointColor;
  }

  move() {
    this.x += this.dx;
    if (this.x < 0) {
      this.x = 0;
      this.dx = -this.dx;
    } else if (this.x > this.canvas.width) {
      this.x = this.canvas.width;
      this.dx = -this.dx;
    }
    this.y += this.dy;
    if (this.y < 0) {
      this.y = 0;
      this.dy = -this.dy;
    } else if (this.y > this.canvas.height) {
      this.y = this.canvas.height;
      this.dy = -this.dy;
    }
  }

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

  randomInt(min, max) {
    return Math.floor((max - min + 1) * Math.random() + min);
  }

  randomFloat(min, max) {
    return (max - min) * Math.random() + min;
  }
}

class ParticleBackground {
  constructor(options) {
    options = options || {};
    this.canvas = document.createElement("canvas");
    this.ctx = this.canvas.getContext("2d");
    this.points = [];

    this.degree = 2.5;
    this.startTime = new Date().getTime();

    this.options = {
      backgroundColor: options.backgroundColor || "rgba(0, 43, 54,1)",
      pointNum: options.pointNum || 150,
      pointColor: options.pointColor || "rgba(255,255,255,1)",
      lineLength: options.lineLength || 10000,
    };

    this.p0 = new Point(this.canvas, this.options);
    this.p0.dx = this.p0.dy = 0;

    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.canvas.style.cssText = `
      position: fixed;
      top: 0px;
      left: 0px;
      z-index: -1;
      opacity: 1.0;
    `;
    document.body.appendChild(this.canvas, this.options);
  }

  initPoints(num) {
    if (!num) num = this.options.pointNum;
    for (var i = 0; i < num; ++i) {
      this.points.push(new Point(this.canvas));
    }
    this.initListner();
  }

  drawLine(p1, p2, deg) {
    var dx = p1.x - p2.x;
    var dy = p1.y - p2.y;
    var dis2 = dx * dx + dy * dy;
    if (dis2 < 2 * this.options.lineLength) {
      if (dis2 > this.options.lineLength) {
        if (p1 === this.p0) {
          p2.x += dx * 0.03;
          p2.y += dy * 0.03;
        } else return;
      }
      var t = (1.05 - dis2 / this.options.lineLength) * 0.2 * deg;
      this.ctx.strokeStyle = "rgba(255,255,255," + t + ")";
      this.ctx.beginPath();
      this.ctx.lineWidth = 1.5;
      this.ctx.moveTo(p1.x, p1.y);
      this.ctx.lineTo(p2.x, p2.y);
      this.ctx.closePath();
      this.ctx.stroke();
    }
    return;
  }

  drawFrame() {
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.ctx.fillStyle = this.options.backgroundColor;
    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

    var arr = this.p0.x == null ? this.points : [this.p0].concat(this.points);
    for (var i = 0; i < arr.length; ++i) {
      for (var j = i + 1; j < arr.length; ++j) {
        this.drawLine(arr[i], arr[j], 1.0);
      }
      arr[i].draw();
      arr[i].move();
    }

    window.requestAnimationFrame(this.drawFrame.bind(this));
  }

  initListner() {
    const _this = this;
    document.onmousemove = function (ev) {
      _this.p0.x = ev.clientX;
      _this.p0.y = ev.clientY;
    };
    document.onmousedown = function (ev) {
      _this.degree = 5.0;
      _this.p0.x = ev.clientX;
      _this.p0.y = ev.clientY;
    };
    document.onmouseup = function (ev) {
      _this.degree = 2.5;
      _this.p0.x = ev.clientX;
      _this.p0.y = ev.clientY;
    };
    window.onmouseout = function () {
      _this.p0.x = null;
      _this.p0.y = null;
    };
  }
}

实现效果

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现星空粒子效果,可以使用以下步骤: 1. 创建一个 `canvas` 元素,并设置其宽度和高度为浏览器窗口的宽度和高度。 ```html <canvas id="canvas"></canvas> ``` ```css canvas { width: 100vw; height: 100vh; } ``` 2. 使用 JavaScript 创建 `canvas` 元素的上下文对象,并设置其样式属性。 ```js const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, canvas.width, canvas.height); ``` 3. 创建一个 `Particle` 类,用于创建和更新粒子的位置和速度。 ```js class Particle { constructor(x, y, vx, vy, radius) { this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.radius = radius; } update() { this.x += this.vx; this.y += this.vy; } } ``` 4. 创建多个随机位置、速度和大小的粒子,并在每一帧更新它们的位置。 ```js const particles = []; for (let i = 0; i < 100; i++) { const x = Math.random() * canvas.width; const y = Math.random() * canvas.height; const vx = (Math.random() - 0.5) * 2; const vy = (Math.random() - 0.5) * 2; const radius = Math.random() * 2; particles.push(new Particle(x, y, vx, vy, radius)); } function update() { ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); for (const particle of particles) { particle.update(); ctx.beginPath(); ctx.fillStyle = '#FFFFFF'; ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2); ctx.fill(); } requestAnimationFrame(update); } update(); ``` 这样就可以实现一个简单的星空粒子效果了。你可以根据自己的需求调整粒子的数量、颜色、大小等参数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值