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 = 2 * CSIZE;
          c.height = 2 * CSIZE;
          d.append(c);
          return c.getContext("2d");
        })();
        ctx.translate(CSIZE, CSIZE);
        ctx.lineCap = "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 Circle = function (x, y, xp, yp, radius, pc) {
          this.x = x;
          this.y = y;
          this.xp = xp;
          this.yp = yp;
          this.radius = radius;
          this.pc = pc;
          this.c = [];
          this.drawCircle = rf => {
            ctx.beginPath();
            ctx.moveTo(this.x + this.radius * rf, this.y);
            ctx.arc(this.x, this.y, this.radius * rf, 0, TP);
            ctx.fillStyle = "hsl(" + (hue + 5 * this.radius) + ",90%,50%)";
            ctx.fill();
          };
        };
        
        var Curve = function () {
          this.car = [];
          this.to = -getRandomInt(0, 400);
          this.addCurveCircle = cir => {
            if (cir.pc) {
              this.car.unshift(cir.pc);
              this.addCurveCircle(cir.pc);
            } else {
              return;
            }
          };
          this.setPath = () => {
            this.len = 0;
            this.path = new Path2D();
            this.path.moveTo(0, 0);
            this.path.lineTo(this.car[1].xp, this.car[1].yp);
            this.len += this.car[0].radius;
            for (let i = 1; i < this.car.length - 1; i++) {
              this.path.bezierCurveTo(this.car[i].x, this.car[i].y,
              this.car[i].x, this.car[i].y,
              this.car[i + 1].xp, this.car[i + 1].yp);
              this.len += 2 * this.car[i].radius;
            }
            this.path.lineTo(this.car[this.car.length - 1].x, this.car[this.car.length - 1].y);
            this.len += this.car[this.car.length - 1].radius;
          };
          this.drawCurve = () => {
            let tt = this.to + t;
            ctx.setLineDash([Math.max(1, tt), 4000]);
            ctx.stroke(this.path);
            if (tt > this.len + 40) {
              this.car[this.car.length - 1].drawCircle(0.8);
              if (tt > this.len + 120) return false;else
              return true;
            } else if (tt > this.len) {
              let raf = 0.8 * (tt - this.len) / 40;
              this.car[this.car.length - 1].drawCircle(raf);
              return true;
            } else {
              return true;
            }
          };
        };
        
        var drawPoint = (x, y, col) => {// diag
          .........完整代码请登录后点击上方下载按钮下载查看