canvas实现蜘蛛网效果-html代码-BFW代码库

canvas实现蜘蛛网效果

代码语言：html

所属分类：背景

代码描述：canvas实现蜘蛛网效果

代码标签：效果

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

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

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


<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<script>
/*############################################################################*/
console.clear();

function lerp(a, b, p) {
  return [
  a[0] + (b[0] - a[0]) * p,
  a[1] + (b[1] - a[1]) * p];

}

setTimeout(() => {
  class MyGE extends GE {
    initGame() {
      // *** GUI ***
      this.addGui('factor', 0.7, 0, 2, 0.1);
      this.addGui('nStrings', 16, 1, 50, 1);
      this.addGui('rows', 10, 1, 50, 1);
      this.addGui('clear', 1, 0, 1, 0.1);
      this.addGui('reset', this.resetGame);
    }

    resetGame() {
      // *** VARIABLES ***
      this.frame = 0;
      console.log('reset');
      //this.canvas.focus();
    }

    render() {
      let { ctx, w, h } = this;

      ctx.fillStyle = `rgba(0,0,0, ${this.clear})`;
      ctx.fillRect(0, 0, w, h);

      let vr = Math.min(w, h) / 2;
      ctx.translate(w / 2, h / 2);

      const { nStrings, rows, factor } = this;
      let aStep = Math.PI * 2 / nStrings;
      let rStep = vr / rows / nStrings;
      let angle = 0;
      let r = 0;
      while (r < vr) {
        let a = [
        Math.cos(angle) * r,
        Math.sin(angle) * r];

        let b = [
        Math.cos(angle + aStep) * (r + rStep),
        Math.sin(angle + aStep) * (r + rStep)];

        let c = lerp([0, 0], lerp(a, b, 0.5), factor);

        ctx.beginPath();
        ctx.moveTo(...a);
        ctx.quadraticCurveTo(...c, ...b);
        ctx.strokeStyle = '#f00';
        ctx.stroke();

        angle += aStep;
        r += rStep;
      }
      for (let i = 0; i < nStrings; ++i) {
        let a = [
        Math.cos(Math.PI * 2 / nStrings * i) * vr,
        Math.sin(Math.PI * 2 / nStrings * i) * vr];


        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(...a);
        ctx.strokeStyle = '#f00';
        ctx.stroke();
      }

      ++this.frame;
    }

    control() {
      let { keys } = this;
      if (keys.has('Mouse0')) {
        this.resetGame();
      }
    }}
  // end MyGE

  window.ge = new MyGE();
});

// BASE CLASS

class GE {
  constructor() {
    this.canvas = document.createElement('canvas');
    this.canvas.setAttribute('tabindex', 0);
    this.canvas.style.userSelect = 'none';
    document.body.style.margin = '0px';
    document.body.style.padding = '0px';
    document.body.style.overflow = 'hidden';
    document.body.appendChild(this.canvas);

    this.ctx = this.canvas.getContext('2d');
    this.resize();
    window.addEventListener('resize', this.resize.bind(this));
    this.setupControls();
    this.initStats();
    this.initGui();
    this.initGame();
    this.resetGame();

    this.loopBinded = this.loop.bind(this);
    setTimeout(this.loopBinded);
  }

  initGame() {}

  resetGame() {}

  addGui(name, val, min = 0, max = 100, step = 1) {
    if (typeof val === 'function') {
      this[name] = val.bind(this);
      this.gui.add(this, name);
    } else {
      this[name] = val;
      return this.gui.add(this, name).min(min).max(max).step(step);
    }
  }

  initGui() {
    this.gui = new dat.GUI();
  }

  resize() {
    [this.w, this.h] = [window.innerWidth, window.innerHeight];
    [this.canvas.width, this.canvas.h.........完整代码请登录后点击上方下载按钮下载查看