花朵生长动画特效-html代码-BFW代码库

花朵生长动画特效

代码语言：html

所属分类：动画

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

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

<title> octopopaint - bwa - click anywhere - right-click to clear</title>
<style>
    body, canvas {
    background-color: black;
    margin: 0;
    overflow: hidden;
}

  </style>

</head>
<body translate="no">
<canvas id=canvas></canvas>

<script>
      let rnd = n => (Math.random() - 0.5) * (n || 1);
let ctx = canvas.getContext("2d");
let g, i, c, w, h;

function newSeg(s, dir, da, w) {
  return {
    da,
    col: i + c,
    width: w || s.width - 0.02,
    pts: [s.pts[2], s.pts[3]],
    dir: dir + da,
    len: s.len };

}

function grow(x, y) {
  i = 0, c = rnd(360);
  let da = rnd();
  let n = 3 + Math.floor(Math.random() * 9);
  let s = 0.5 + rnd(0.3);
  let pts = [x, y];
  g = Array(n).fill(0).map((e, i) => ({
    pts,
    dir: Math.PI / n * i * 2 + rnd() + da,
    len: s,
    width: 10 }));

  requestAnimationFrame(growIteration);
}

function growStep(count) {
  for (var j = 0; j < count; j++, i++) {
    g = g.flat().map(s => {
      s.pts.push(s.pts[0] + Math.cos(s.dir) * s.len,
      s.pts[1] + Math.sin(s.dir) * s.len);
      paintSegment(s);
      return growAlgorithm(s);
    });
  }
}

function growAlgorithm(s) {
  let result = [];
  if (s.width < 0)
  return result;
  let sw = rnd(0.05);
  i.........完整代码请登录后点击上方下载按钮下载查看