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="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 /* top left corner coordinate */,
N = 20 /* numbers of rows/ columns */,
NP = N * N /* total number of polygons */,
L = D / N /* edge length of a grid cell */,
R = .375 * L /* max circumradius of in-cell polygon */,
UA = 2 * Math.PI / 360 /* unit angle */,

THEME = ['#B3CC57', '#ECF081', '#FFBE40', '#EF746F', '#AB3E5B'],
NT = THEME.length,

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

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

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

class RandPoly {
  constructor(ox, oy) {
    /* coordinates of circumcircle centre */
    this.ox = ox;
    this.oy = oy;
    this.d = Math.hypot(this.ox, this.oy);
    this.l = ~~((this.d + .5) / (L * Math.SQRT2));

    this.n = 3 + this.l % 6; /* number of polygon vertices */
    this.β = 2 * Math.PI / this.n; /* base angle corresponding to an edge */
    this.f = 5; /* frequency */
    this.δ = this.l * Math.PI * .1; /* initial angular offset of pulse */
    this.m = 1; /* multiplier, dummy value for now */
    this.vx = []; /* vertex coordinates relative to circumcircle centre */
    this.b = 0; /* paint bucket index */
    this.o = this.l % 2; /* option index (0: fill, 1: .........完整代码请登录后点击上方下载按钮下载查看