好看的动态背景图

最新推荐文章于 2023-05-17 20:24:37 发布

小时候可俊了啊

最新推荐文章于 2023-05-17 20:24:37 发布

阅读量371

点赞数

分类专栏：笔记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_46338965/article/details/126642542

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #canvas {
        height: 500px;
        width: 700px;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      initBgc();
      function initBgc() {
        var canvas = document.getElementById("canvas"),
          ctx = canvas.getContext("2d"),
          w = (canvas.width = window.innerWidth),
          h = (canvas.height = window.innerHeight),
          hue = 217,
          stars = [],
          count = 0,
          maxStars = 1800;
        // Cache gradient
        var canvas2 = document.createElement("canvas"),
          ctx2 = canvas2.getContext("2d");
        canvas2.width = 100;
        canvas2.height = 100;
        var half = canvas2.width / 2,
          gradient2 = ctx2.createRadialGradient(
            half,
            half,
            0,
            half,
            half,
            half
          );
        gradient2.addColorStop(0.025, "#fff");
        gradient2.addColorStop(0.1, "hsl(" + hue + ", 61%, 33%)");
        gradient2.addColorStop(0.25, "hsl(" + hue + ", 64%, 6%)");
        gradient2.addColorStop(1, "transparent");

        ctx2.fillStyle = gradient2;
        ctx2.beginPath();
        ctx2.arc(half, half, half, 0, Math.PI * 2);
        ctx2.fill();

        function random(min, max) {
          if (arguments.length < 2) {
            max = min;
            min = 0;
          }

          if (min > max) {
            var hold = max;
            max = min;
            min = hold;
          }

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

        function maxOrbit(x, y) {
          var max = Math.max(x, y),
            diameter = Math.round(Math.sqrt(max * max + max * max));
          return diameter / 2;
        }

        var Star = function () {
          this.orbitRadius = random(maxOrbit(w, h));
          this.radius = random(60, this.orbitRadius) / 12;
          this.orbitX = w / 2;
          this.orbitY = h / 2;
          this.timePassed = random(0, maxStars);
          this.speed = random(this.orbitRadius) / 48000;
          this.alpha = random(2, 10) / 10;

          count++;
          stars[count] = this;
        };

        Star.prototype.draw = function () {
          var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
            y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
            twinkle = random(10);

          if (twinkle === 1 && this.alpha > 0) {
            this.alpha -= 0.05;
          } else if (twinkle === 2 && this.alpha < 1) {
            this.alpha += 0.05;
          }

          ctx.globalAlpha = this.alpha;
          ctx.drawImage(
            canvas2,
            x - this.radius / 2,
            y - this.radius / 2,
            this.radius,
            this.radius
          );
          this.timePassed += this.speed;
        };

        for (var i = 0; i < maxStars; i++) {
          new Star();
        }

        function animation() {
          ctx.globalCompositeOperation = "source-over";
          ctx.globalAlpha = 0.8;
          ctx.fillStyle = "hsla(" + hue + ", 64%, 6%, 1)";
          ctx.fillRect(0, 0, w, h);

          ctx.globalCompositeOperation = "lighter";
          for (var i = 1, l = stars.length; i < l; i++) {
            stars[i].draw();
          }

          window.requestAnimationFrame(animation);
        }

        animation();
      }
    </script>
  </body>
</html>