页面彩带效果

直接引入以下js文件:

function loadJS(url, callback) {
  var script = document.createElement('script')
  var fn = callback || function () { };
  script.type = 'text/javascript';
  if (script.readyState) {
    script.onreadystatechange = function () {
      if (script.readyState == 'loaded' || script.readyState == 'complete') {
        script.onreadystatechange = null;
        fn();
      }
    };
  } else {
    script.onload = function () {
      fn();
    };
  }
  script.src = url;
  document.getElementsByTagName('head')[0].appendChild(script);
}

!(function () {
  loadJS("https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js", () => {
    caidai();
  })
})();
const caidai = () => {
  $("body").css({ "margin": "0", "padding": "0"})
  .append($("<canvas id='canvascaidai'></canvas>"));
  $("#canvascaidai").css({ "width": "100vw", "height": "100vh", "position": "fixed", "top": "0", "left": "0", "z-index": "-100" });
  document.addEventListener('touchmove', event => event.preventDefault());
  let ctx = canvascaidai,
    c = ctx.getContext('2d'),
    basePixel = window.devicePixelRatio || 1,
    width = window.innerWidth,
    height = window.innerHeight,
    startOffset = 90,
    coordinateArr,
    startRadius = 0,
    radius = Math.PI * 2;
  ctx.width = width * basePixel,
    ctx.height = height * basePixel;
  c.scale(basePixel, basePixel),
    c.globalAlpha = 0.6;
  document.onclick = initialPotray;
  document.ontouchstart = initialPotray;
  initialPotray();
  function initialPotray() {
    c.clearRect(0, 0, width, height);
    // first
    coordinateArr = [
      { x: 0, y: height * .7 + startOffset },
      { x: 0, y: height * .7 - startOffset }
    ];
    while (coordinateArr[1].x < width + startOffset) drawTraingleImage(coordinateArr[0], coordinateArr[1]);
  }
  function drawTraingleImage(coor1, coor2) {
    c.beginPath();
    c.moveTo(coor1.x, coor1.y);
    c.lineTo(coor2.x, coor2.y);
    let coor3 = {
      x: coor2.x + (Math.random() * 2 - 0.25) * startOffset,
      y: reCalculate(coor2.y)
    };
    c.lineTo(coor3.x, coor3.y);
    c.closePath();
    startRadius -= radius / -50;
    c.fillStyle = '#' + (
      Math.cos(startRadius) * 127 + 128 << 16 |
      Math.cos(startRadius + radius / 3) * 127 + 128 << 8 |
      Math.cos(startRadius + radius / 3 * 2) * 127 + 128
    ).toString(16);

    c.fill();
    coordinateArr[0] = coordinateArr[1],
      coordinateArr[1] = coor3;
  }
  function reCalculate(yNum) {
    let tmp = yNum + (Math.random() * 2 - 1.1) * startOffset;
    return (tmp > height || tmp < 0) ? reCalculate(yNum) : tmp;
  }
};