js实现旋转波纹效果-html代码-BFW代码库

代码语言：html

所属分类：粒子

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

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

<title>Trochoid ribbons</title>
<style>
      * { box-sizing:border-box; }
  body { font-family:sans-serif; font-size:0.8em; background:#000; }
  canvas { max-width:100%; border-radius:400px; }
  #pmenu { border:none; cursor:pointer; padding:none; font-weight:bold; background:none; line-height:1; font-size:26pt; }
  div.mb { position:relative; margin:0; padding:0; text-align:center; font-weight:bold; border-top:1px dotted #BBB; border-right:1px solid transparent; border-bottom:1px solid transparent; border-left:1px solid transparent; }
  div.pholder { width:188px; padding:4px; height:25px; }
  div.slider { position:absolute; top:0px; left:0px; height:26px; opacity:0; background:hsl(240, 30%, 86%); display:block; width:70px; padding:4px 0; border-right:4px solid hsl(240,30%,74%); }
/* 70 of 132 */
  div.rtext { position:absolute; top:0px; left:0px; }
  div.rlabel { display:inline-block; float:left; white-space:nowrap; padding:4px 0; width:120px; }
  div.rep { display:inline-block; float:left; width:32px;margin-right:2px; border-left:1px dotted #EEE; padding:4px 4px 4px 0; text-align:right; }
  div.inputdiv { position:absolute; top:0px; left:0px; height:26px; border:1px solid transparent; }
  input.range { height:24px; opacity:0.01; cursor:pointer; margin:0; width:152px; }
  input.cb { position:absolute; top:0; left:0; opacity:0.01; width:100%; height:24px; cursor:pointer; margin:0; }
  div.infoc { border:1px dotted #99F; }
  div.locksym { text-align:center; font-size:14px; padding:2px 0; color:black; }
  div.lockdiv { position:relative; padding:0; float:right; height:24px; height:26px; margin-top:-1px; }

  </style>

</head>
<body translate="no">
<div style="text-align:center;"><canvas id="cta" width="800" height="800"></canvas></div>
<div class="bgfade" style="position:absolute; top:8px; right:8px;">
<div style="text-align:right;">
<button id="pmenu">
<span id="xmrep" style="opacity:0;">&#215;</span>
<span id="pmrep" style="position:absolute; top:3px; right:5px; color:white; opacity:.8;">&#8801;</span>
</button>
</div>
<div id="ctl" style="opacity:0;">
<div class="mb" style="width:100%; height:24px;">
<div class="pholder">&#160;</div>
<div class="rtext">
<div id="ss" class="rlabel" style="width:188px;">Stop</div>
</div>
<div class="inputdiv">
<button style="width:188px; height:24px; display:block; cursor:pointer; padding:0; border:none; opacity:.01;" onfocus="btnFocus(this)" onblur="btnBlur(this)" onmouseover="bmov(this)" onmouseout="bmou(this)" onclick="start()">&#160;</button>
</div>
</div>
</div>

<script>
      var CSIZE = 400;

var canvas = document.querySelector('#cta');
onresize = function () {
  canvas.style.maxHeight = window.innerHeight - 20 + 'px';
};

var ctx = canvas.getContext('2d');
ctx.translate(CSIZE, CSIZE);
ctx.rotate(-Math.PI / 2);
ctx.lineWidth = 4;

ctx.strokeStyle = 'hsl(180,90%,80%)';
ctx.fillStyle = 'hsla(0,0%,0%,0.05)';

onresize();

function powerRandom(p) {
  function rec(p, r) {
    --p;
    if (p <= 0) {
      return r;
    } else {
      r *= Math.random();
      return rec(p, r);
    }
  }
  p = Math.round(p);
  return rec(p, Math.random());
}

function getRandomInt(min, max, low) {
  var p = low ? low : 1;
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(powerRandom(p) * (max - min)) + min;
}

var primes = [2, 3, 5, 7, 11, 13, 17, 19];

var cycsets = {
  2: [2, 4, 6, 8, 10, 12, 14, 16, 18],
  3: [3, 6, 9, 12, 15, 18],
  5: [5, 10, 15],
  7: [7, 14],
  11: [11],
  13: [13],
  17: [17],
  19: [19] };


var cycsets2 = {
  2: [2, 4, 8, 16],
  3: [3, 9],
  5: [5],
  7: [7],
  11: [11],
  13: [13],
  17: [17],
  19: [19] };


function getFactors(n) {
  let a = [];
  for (let p of primes) {
    if (n % p == 0) {
      a.push(p);
    }
  }
  return a;
}

function getCycleArray(n) {
  let a = new Set();
  for (let p of primes) {
    if (n % p == 0) {
      for (let f of cycsets2[p]) {
        a.add(f);
      }
    }
  }
  return Array.from(a);
}

var Roulette = function (ro) {
  if (ro instanceof Roulette) {
    Object.assign(this, ro);
  } else {
    this.dz = -1;
    this.type1 = -1;
    this.type2 = -1;
    this.type3 = -1;
    this.type4 = -1;
    this.c0 = 1;
    this.c1 = 8;
    this.c2 = 16;
    thi.........完整代码请登录后点击上方下载按钮下载查看