canvas屏幕动画

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <script type="text/javascript">
    let round = []

    function random(max = 1, min = 0) {
      return parseInt(Math.random() * (max - min)) + min;
    }

    class renderItem {
      constructor(ctx, index, x, y, width, height) {
        this.ctx = ctx;
        this.index = index;
        this.x = x;
        this.y = y;
        this.r = random(parseInt(width / 10), parseInt(width / 20));
        this.o = (Math.random() + 0.1).toFixed(1)
        this.a = random(3, 1) === 2
        this.color = `rgba(${random(250, 50)}, ${random(240, 0)}, ${random(255, 200)}, 0.3)`
      };

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

      move(width, height) {
        this.y -= this.o
        if (this.a) {
          this.x -= 0.2
        } else {
          this.x += 0.2
        }
        const step = 50
        if (this.y <= -step || this.x <= -step || this.x > (width + step)) {
          this.y = height + step;
          this.x = random(width);
        }
        this.draw()
      }
    }


    function animate(ctx, width, height) {
      ctx.clearRect(0, 0, width, height);
      round.forEach(v => {
        v.move(width, height)
      })
      requestAnimationFrame(animate.bind(this, ctx, width, height))
    }

    function init(ctx, ornage, width, height) {
      for (var i = 0; i < ornage; i++) {
        round[i] = new renderItem(ctx, i, random(width), random(height), width, height);
        round[i].draw();
      }
      animate(ctx, width, height);
    }

    const width = document.documentElement.clientWidth
    const height = document.documentElement.clientHeight

    // 背景动画
    const cvs = document.createElement('canvas')
    document.body.appendChild(cvs)
    const ctx = cvs.getContext('2d')
    cvs.style.zIndex = 200;
    cvs.style.position = 'fixed'
    cvs.style.top = 0;
    cvs.style.left = 0
    cvs.style.right = 0
    cvs.style.bottom = 0
    cvs.style.pointerEvents = 'none'
    cvs.width = width;
    cvs.height = height;
    let orange = parseInt(width / 50) >= 20 ? 20 : parseInt(width / 50)
    init(ctx, orange, width, height)
  </script>
</body>

</html>
猜你喜欢
