螺旋8字动画-html代码-BFW代码库

螺旋8字动画

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  display: grid;
  place-content: center;
  overflow: hidden;
  margin: 0;
  min-height: 100vh;
  background: #333333;
}

canvas {
  max-width: 90vmin;
  max-height: 90vmin;
  border-radius: .5em;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  background: #222222;
}
</style>

</head>
<body translate="no">
<canvas id="c" width="800" height="800"></canvas>

<script>
const _C = document.getElementById('c') /* canvas element */,
C = _C.getContext('2d') /* 2L canvas context */,
D = _C.width /* edge length of canvas square */,
O = -.5 * D /* vertical offset */,
RD = .35 * D /* distribution radius */,
UDA = 2 * Math.PI / 360,
RC = .02 * D /* a polygon's max circumradius */,
AE = Math.PI / 36 /* maximum angular deviation (error) */,
NHI = 6 /* number of hue intervals */,
AHI = 360 / NHI /* angular span of hue interval */,
NV = 6 /* number of hue variations within an interval */,
UAH = AHI / NV /* unit hue angle */,
SL = [95, 65].map(c => `${c}%`) /* saturation and lightness */,
N = 200 /* number of polygons */,
K = 2 /* decimal precision */,
M = Math.pow(10, K),IM = 1 / M,
VMAX = .5 /* max absolute value of velocity */,
POLY = Array(N) /* array of polygons */,
FN = ['line', 'move'] /* drawing functions */;

let rID = null /* request ID */,
aho = 0 /* angular hue offset */,
δ = Math.random() * 2 * Math.PI /* angular start point of curve */;

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

class RandPoly {
  constructor(i) {
    /* SHAPE PROPERTIES */
    this.n = rand(8, 3); /* number of vertices */
    this.β = 2 * Math.PI / this.n; /* base angle corresp to an edge */
    this.f = 0; /* scaling factor */

    /* POSITION PROPERTIES (POLAR COORDINATES) */
    this.r = RD + rand(.5 * RC, -.5 * RC);
    this.α = δ + i / N * 2 * Math.PI + rand(AE, -AE, K);
    this.φ = Math.random() * 2 * Math.PI; /* polygon rotation */

    /* MOTION PROPERTIES */
    this.t = Math.round(rand(10) - i * 100 / N);
    this.cv = rand(VMAX, -VMAX, K);
    this.........完整代码请登录后点击上方下载按钮下载查看