HTML前端星空源码

最新推荐文章于 2023-12-31 17:33:56 发布

闻博.

最新推荐文章于 2023-12-31 17:33:56 发布

阅读量700

点赞数 1

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_58718433/article/details/127741640

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      width: 100%;
      margin: 0;
      overflow: hidden;
    }
    canvas{
      display:block;
    }
  </style>
</head>
<body>
<canvas id='canv'></canvas>
<script>
  var c = document.getElementById('canv');//获取canvas的Id
  var $ = c.getContext('2d');/*设置绘制方式*/
  var u = 0;

  var go = function() {
    var sc, g, g1, i, j, p, x, y, z, w, a, cur,
      d = new Date() / 1000,
      rnd = shift(),
      rnd1 = d,
      rnd2 = 2.4,
      rnd3 = d * 0.2,
      rnd1c = Math.cos(rnd1),
      rnd1s = Math.sin(rnd1),
      rnd2c = Math.cos(rnd2),
      rnd2s = Math.sin(rnd2);
    c.width = window.innerWidth;
    c.height = window.innerHeight;
    sc = Math.max(c.width, c.height);
    $.translate(c.width * 0.5, c.height * 0.5);//从中心开始绘制
    $.scale(sc, sc);//放大最大数值
    /*线性渐变*/
    g = $.createLinearGradient(-1, -2, 1, 2);
    g.addColorStop(0.0, 'hsla(338, 95%, 25%, 1)');
    g.addColorStop(0.5, 'hsla(260, 95%, 5%, 1)');
    g.addColorStop(1.0, 'hsla(338, 95%, 30%, 1)');
    $.fillStyle = g;//颜色
    $.fillRect(-0.5, -0.5, 1, 1);
    $.globalCompositeOperation = 'lighter';
    $.rotate(rnd3 % Math.PI * 2);/*旋转*/
    for (i = 0; i < 300; i += 1) {
      p = rnd();
      x = (p & 0xff) / 128 - 1;
      y = (p >>> 8 & 0xff) / 128 - 1;
      z = (p >>> 16 & 0xff) / 128 - 1;
      w = (p >>> 24 & 0xff) / 256;
      z += d * 0.5;
      z = (z + 1) % 2 - 1;
      a = (z + 1) * 0.5;
      if (a < 0.9) {
        $.globalAlpha = a / 0.7;
      }else {
        a -= 0.9;
        $.globalAlpha = 1 - a / 0.1;
      }
      cur = x * rnd1c + y * rnd1s;
      y = x * rnd1s - y * rnd1c;
      x = cur;
      cur = y * rnd2c + z * rnd2s;
      z = y * rnd2s - z * rnd2c;
      y = cur;
      z -= 0.65;
      if (z >= 0) {
        continue;
      }
      sc = 0.1 / z;
      x *= sc;
      y *= sc;
      $.save();
      g1 = $.createRadialGradient(1, 1, 2, 1, 1, 1);
      g1.addColorStop(0.0, 'hsla('+i+', 70%, 40%,.8)');
      g1.addColorStop(0.5, 'hsla('+i+', 75%, 50%, 1)');
      g1.addColorStop(1.0, 'hsla('+i+', 80%, 60%, .8)');
      $.fillStyle = g1;
      $.translate(x, y);
      $.scale(sc * 0.017, sc * 0.017);
      $.beginPath();
      $.moveTo(2, 0);
      for (j = 0; j < 10; j += 1) {
        $.rotate(Math.PI*2 * 0.1);
        $.lineTo(j % 2 + 1, 0);
      }
      $.arc(10, 10, 1, 0, Math.PI * 2);
      $.rotate(Math.PI * 2 * 0.1);
      $.closePath();
      $.fill();
      $.restore();
    }
  };
  /*
  Marsaglia's Xorshift128 PRG: http://en.wikipedia.org/wiki/Xorshift
  */
  var shift = function(x, y, z, w) {
    x = x || 1234567;
    y = y || 362436069;
    z = z || 521288629;
    w = w || 88675123;

    return function() {
      var s = x ^ (x << 11);
      x = y;
      y = z;
      z = w;
      w = (w ^ (w >>> 19)) ^ (s ^ (s >>> 8));
      return w;
    };
  }
  window.addEventListener('resize', function() {
    c.width = window.innerWidth;
    c.height = window.innerHeight;
  }, false);
  window.requestAnimationFrame = window.requestAnimationFrame||
    window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame;
  var run = function() {
    window.requestAnimationFrame(run);
    go();
  }
  run();
</script>
</body>
</html>