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 My.........完整代码请登录后点击上方下载按钮下载查看