canvas实现彩色曲线旋转行走动画效果代码-html代码-BFW代码库

canvas实现彩色曲线旋转行走动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现彩色曲线旋转行走动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






</head>

<body>


    <script>
        "use strict"; // Paul Slaymaker, paul25882@gmail.com
        const body = document.getElementsByTagName("body").item(0);
        body.style.background = "#000";
        const TP = 2 * Math.PI;
        const CSIZE = 400;
        
        const ctx = (() => {
          let d = document.createElement("div");
          d.style.textAlign = "center";
          body.append(d);
          let c = document.createElement("canvas");
          c.width = c.height = 2 * CSIZE;
          d.append(c);
          return c.getContext("2d");
        })();
        ctx.setTransform(1, 0, 0, 1, CSIZE, CSIZE);
        ctx.lineCap = "round";
        ctx.lineJoin = "round";
        
        onresize = () => {
          let D = Math.min(window.innerWidth, window.innerHeight) - 40;
          ctx.canvas.style.width = D + "px";
          ctx.canvas.style.height = D + "px";
        };
        
        const getRandomInt = (min, max, low) => {
          if (low) return Math.floor(Math.random() * Math.random() * (max - min)) + min;else
          return Math.floor(Math.random() * (max - min)) + min;
        };
        
        var colors = [];
        var setColors = () => {
          colors = [];
          let colorCount = 4;
          let hue = getRandomInt(180, 270);
          for (let i = 0; i < colorCount; i++) {
            let hd = Math.round(180 / colorCount) * i + getRandomInt(-10, 10);
            let h = (hue + hd) % 360;
            colors.splice(getRandomInt(0, colors.length + 1), 0, "hsl(" + h + ",98%,50%)");
          }
        };
        
        var COUNT = 18; //getRandomInt(20,42);
        var R = CSIZE / COUNT;
        ctx.lineWidth = Math.round(2 * R - 4);
        
        function RPath(initPoint, idx) {
          initPoint.d = true; // TODO, check if already true
          this.dir = idx % 2;
          this.pa = [initPoint];
          if (this.dir) this.ka = [4, 3, 5];else
          this.ka = [1, 2, 0];
          this.gr = 0;
          this.sh = 0;
          this.l = 0;
          this.kidx = idx;
          this.grow = () => {
            let pt = this.pa[this.pa.length - 1];
            for (let ipt of this.ka) {
              let cpt = pt.cpa[ipt];
              if (!cpt) continue;
              if (cpt.d) continue;
              cpt.d = true;
              this.pa.push(cpt);
              this.gr++;
              return true;
            }
            return false;
          };
          this.shrink = () => {
            if (this.pa.length > 4) this.sh = 1;else
            this.sh = 0;
            if (this.pa.length < 4) return;
            this.pa[0].d = false;
            this.pa.shift();
            this.sh = 1;
            return;
          };
          this.getPath = () => {
            let p = new Path2D();
            if (!this.sh && !this.gr) {
              p.moveTo(this.pa[1].x, this.pa[1].y);
              for (let i = 2; i < this.pa.length; i++) {
                p.lineTo(this.pa[i].x, this.pa[i].y);
              }
              return p;
            }
            if (this.sh) {
              p.moveTo((1 - frac) * this.pa[0].x + frac * this.pa[1].x, (1 - frac) * this.pa[0].y + frac * this.pa[1].y);
            } else p.moveTo(this.pa[0].x, this.pa[0].y);
            for (let i = 1; i < this.pa.length - 2; i++) {
              p.lineTo(this.pa[i].x, this.pa[i].y);
            }
            let pt2 = this.pa[this.pa.length - 2];
            let pt3 = this.pa[this.pa.length - 1];
            if (this.gr == 1) {
              p.lineTo(pt2.x, pt2.y);
              p.lineTo((1 - frac) * pt2.x + frac * pt3.x, (1 - frac) * pt2.y + frac * pt3.y);
            } else if (this.gr == 2) {
              if (frac < 0.5) {
                let pt1 = this.pa[this.pa.length - 3];
                let f = 2 * frac;
                p.lineTo((1 - f) * pt1.x + f * pt2.x, (1 - f) * pt1.y + f * pt2.y);
              } else {
                let f = 2 * (frac - 0.5);
                p.lineTo(pt2.x, pt2.y);
                p.lineTo((1 - f) * pt2.x + f * pt3.x, (1 - f) * pt2.y + f * pt3.y);
              }
            } else {
              p.lineTo(pt2.x, pt2.y);
              p.lineTo(pt3.x, pt3.y);
            }
            return p;
          };
        }
        
        var removePath = idx => {
          for (let i = 0; i < rpa[idx].pa.length; i++) rpa[idx].pa[i].d = false;
          rpa.splice(idx, 1);
        };
        
        function start() {
          if (stopped) {
            requestAnimationFrame(animate);
            stopped = false;
          } else {
            stopped = true;
          }
        }
        ctx.canvas.addEventListener("click", s.........完整代码请登录后点击上方下载按钮下载查看