canvas万花筒旋转动画-html代码-BFW代码库

canvas万花筒旋转动画

代码语言：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="canvas" width="800" height="800"></canvas>

<script>
const _C = document.getElementById('canvas') /* canvas element */,
C = _C.getContext('2d') /* 2L canvas context */,
L = _C.width /* edge length of canvas square */,
O = -.5 * L /* top left corner coord if 0,0 is in the middle */,
R = L / Math.SQRT2 /* half diagonal of canvas square */,
RC = .05 * L /* polygon circumradius */,
UA = 2 * Math.PI / 360 /* unit angle = 1 degree */,

POLY = [] /* array to fill with polygons */,
N = 500 /* total number of polygons */,

/* hex values for paint buckets */
THEME = ['#BC8696', '#FEC87E', '#FEEBA7', '#7ED6BE', '#557C9B'],
NT = THEME.length /* number of paint buckets */,

OPTS = ['fill', 'stroke'],
NO = OPTS.length,

NA = 1 /* number of arms per hex value */,

FN = ['line', 'move'];

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

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

    /* PAINT PROPERTIES */
    this.o = rand();
    this.b = rand(NT - 1); /* number of paint bucket we put it in */

    /* POSITION PROPERTIES */
  .........完整代码请登录后点击上方下载按钮下载查看