canvas模拟多个不同大小滚轮皮带传动动画效果代码-html代码-BFW代码库

代码语言：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";
        
        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 getColors = () => {
          let c = [];
          let colorCount = 4;
          let hue = getRandomInt(90, 270);
          for (let i = 0; i < colorCount; i++) {
            let hd = Math.round(240 / colorCount) * i + getRandomInt(-10, 10);
            let sat = 70 + getRandomInt(0, 31);
            let lum = 50 + getRandomInt(0, 11);
            c.splice(getRandomInt(0, c.length + 1), 0, "hsl(" + (hue + hd) % 360 + "," + sat + "%," + lum + "%)");
          }
          return c;
        };
        
        const rad = 90;
        var ww = 12;
        var lw = 12;
        var t = 40;
        var speed = 3;
        const SPACER = 18;
        const dm1 = new DOMMatrix([0, 1, -1, 0, 0, 0]);
        const dm2 = new DOMMatrix([-1, 0, 0, -1, 0, 0]);
        
        var Circle = function (x, y, r, pc) {
          this.x = x;
          this.y = y;
          this.x2 = x;
          this.radius = rad - SPACER; // can be modified
          this.pc = pc;
          this.level = 0;
          this.sr = 1;
          this.setSpokes = () => {
            this.spokes = new Path2D();
            this.spokes.moveTo(0, 0);
            this.spokes.lineTo(this.radius - (lw + ww) / 2, 0);
            this.spokes.addPath(this.spokes, dm1);
            this.spokes.addPath(this.spokes, dm2);
          };
          this.setSpokes();
        
          this.setPaths = () => {
            this.path = new Path2D();
            this.path2 = new Path2D();
            let rr = (lw + ww) / 2;
            this.path.moveTo(this.x + this.radius - rr, this.y);
            this.path.arc(this.x, this.y, this.radius - rr, 0, TP);
            this.path2.moveTo(this.x + this.radius - rr - 5, this.y);
            this.path2.arc(this.x, this.y, this.radius - rr - 5, 0, TP);
            if (this.level == 2) {
              this.path.moveTo(this.x + this.radius / 2 - rr, this.y);
              this.path.arc(this.x, this.y, this.radius / 2 - rr, 0, TP);
              this.path2.moveTo(this.x + this.radius / 2 - rr - 5, this.y);
              this.path2.arc(this.x, this.y, this.radius / 2 - rr - 5, 0, TP);
            }
          };
          this.getSpokes = () => {// with motion, no need for separate func
            let p = new Path2D();
            let ra = -speed * t / this.radius / this.sr;
            let dm = new DOMMatrix([Math.cos(ra), Math.sin(ra), -Math.sin(ra), Math.cos(ra), this.x, this.y]);
            p.addPath(this.spokes, dm);
            return p;
          };
        };
        
        var Link = function (c1, c2) {
          c1.level++;
          c2.level++;
          c2.sr = c1.sr * c1.level / c2.level;
          this.sr = c2.sr;
          this.c1rad = c1.level > 1 ? c1.radius / 2 : c1.radius;
          this.setPath = () => {
            this.lpath = new Path2D();
            let aa = Math.atan2(c2.y - c1.y, c2.x - c1.x);
            let d = Math.pow((c1.x - c2.x) * (c1.x - c2.x) + (c1.y - c2.y) * (c1.y - c2.y), 0.5);
            let th = Math.asin((this.c1rad - c2.radius) / d);
            let aa1 = -th + aa + TP / 4;
            let aa2 = th + aa - TP / 4;
            // set up 3 paths, 4th is from closePath
            let x1 = c1.x + this.c1rad * Math.cos(aa1);
            let y1 = c1.y + this.c1rad * Math.sin(aa1);
            let x3 = c2.x + c2.radius * Math.cos(aa1);
            let y3 = c2.y + c2.radius * Math.sin(aa1);
            let x4 = c2.x + c2.radius * Math.cos(aa2);
            let y4 = c2.y + c2.radius * Math.sin(aa2);
            this.lpath.moveTo(x1, y1);
            this.lpath.arc(c1.x, c1.y, this.c1rad, aa1, aa2);
            this.lpath.lineTo(x4, y4);
            this.lpath.arc(c2.x, c2.y, c2.radius, aa2, aa1);
            this.lpa.........完整代码请登录后点击上方下载按钮下载查看