canvas实现螺旋加载进度条效果代码-html代码-BFW代码库

canvas实现螺旋加载进度条效果代码

代码语言：html

所属分类：进度条

代码描述：canvas实现螺旋加载进度条效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
/* latin-ext */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/courierprime/v9/u-450q2lgwslOqpF_6gQ8kELaw9pWt_-.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/courierprime/v9/u-450q2lgwslOqpF_6gQ8kELawFpWg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body,html{
  background: #000;
  font-family: Courier Prime;
  margin: 0;
  height: 100vh;
  overflow: hidden;
#c{
  background:#000;
  position: relative;
  left: 50%;
  top: 50%;
  border: 1px solid #4f82;
  transform: translate(-50%, -50%);
}
</style>


  
  
</head>

<body >
  <canvas id=c>
  
      <script>
c = document.querySelector('#c');
icw = c.width = 1920;
ich = c.height = 200;
x = c.getContext('2d');
C = Math.cos;
S = Math.sin;
t = 0;
T = Math.tan;

rsz = window.onresize = () => {
  setTimeout(() => {
    c.style.width = 'calc(100% - 40px)';
    setTimeout(() => c.style.height = c.clientWidth * (ich / icw) + 'px', 0);
  }, 0);
};
rsz();

async function Draw() {
  oX = oY = oZ = 0;
  if (!t) {
    R = R2 = (Rl, Pt, Yw, m) => {
      M = Math;
      A = M.atan2;
      H = M.hypot;
      X = S(p = A(X, Z) + Yw) * (d = H(X, Z));
      Z = C(p) * d;
      Y = S(p = A(Y, Z) + Pt) * (d = H(Y, Z));
      Z = C(p) * d;
      X = S(p = A(X, Y) + Rl) * (d = H(X, Y));
      Y = C(p) * d;
      if (m) {
        X += oX;
        Y += oY;
        Z += oZ;
      }
    };
    Q = () => [c.width / 2 + X / Z * 900, c.height / 2 + Y / Z * 900];

    Rn = Math.random;

    stroke = (scol, fcol, lwo = 1, od = true, oga = 1) => {
      if (scol) {
        //x.closePath()
        if (od) x.globalAlpha = .2 * oga;
        x.strokeStyle = scol;
        x.lineWidth = Math.min(1000, 100 * lwo / Z);
        if (od) x.stroke();
        x.lineWidth /= 4;
        x.globalAlpha = 1 * oga;
        x.stroke();
      }
      if (fcol) {
        x.globalAlpha = 1 * oga;
        x.fillStyle = fcol;
        x.fill();
      }
    };

    G_ = 100000, iSTc = 1e4;
    ST = Array(iSTc).fill().map(v => {
      X = (Rn() - .5) * G_;
      Y = (Rn() - .5) * G_;
      Z = (Rn() - .5) * G_;
      return [X, Y, Z];
    });

    burst = new Image();
    burst.src = "//repo.bfw.wiki/bfwrepo/images/customelement/burst.png";

    starsLoaded = false, starImgs = [{ loaded: false }];
    starImgs = Array(9).fill().map((v, i) => {
      let a = { img: new Image(), loaded: false };
      a.img.onload = () => {
        a.loaded = true;
    .........完整代码请登录后点击上方下载按钮下载查看