三阶贝塞尔曲线路径动画

<html>
  <body>
    <style>
      html {
        height: 100%;
        overflow: auto;
      }

      body {
        height: 100%;
        padding: 0;
        margin: 0;
        background-color: rgb(244, 245, 249);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: auto;
        min-height: 1000px;
      }

      canvas {
        /*border: 3px solid rgba(37, 44, 65,0.25);*/
        border-radius: 12px;
        box-shadow: 0 0 20px rgba(37, 44, 65, 0.25);
      }

      #executeButton {
        min-width: 100px;
        font-size: 24px;
        cursor: pointer;
        background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
        border: 0;
        border-radius: 3px;
        box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
        color: white;
        margin: 24px;
        text-align: center;
        padding: 4px 0;
        user-select: none;
      }

      #executeButton:active {
        border-color: #fff;
        box-shadow: inset 0 3px 5px 2px rgba(255, 105, 135, 0.3);
      }
    </style>
    <div id="executeButton">执行</div>
    <canvas id="myCanvas" width="800" height="800"></canvas>
    <script>
      const canvas = document.querySelector("#myCanvas");
      const ctx = canvas.getContext("2d");

      // 设置线条样式
      ctx.lineWidth = 2;

      // 起点
      const P0 = { x: 0, y: 300 };
      // 控制点1
      const P1 = { x: 300, y: 300 };
      // 控制点2
      const P2 = { x: 300, y: 0 };
      // 终点
      const P3 = { x: 600, y: 0 };

      function drawThirdOrderBezier(ctx, P0, P1, P2, P3, duration, color, cb) {
        ctx.lineCap = "butt";
        ctx.lineJoin = "round";
        !duration && (duration = 1000);
        !color && (color = "rgba(0,0,255,1)");
        let SC1 = { ...P0 };
        let SC2 = { ...P0 };
        let SC3 = { ...P0 };
        let End = { ...P0 };

        let startTime;

        function calcSC1(t) {
          SC1.x = P0.x + (P1.x - P0.x) * t;
          SC1.y = P0.y + (P1.y - P0.y) * t;
        }

        function calcSC3(t) {
          SC3.x = P1.x + (P2.x - P1.x) * t;
          SC3.y = P1.y + (P2.y - P1.y) * t;
        }

        function calcSC2(t) {
          SC2.x = SC1.x + (SC3.x - SC1.x) * t;
          SC2.y = SC1.y + (SC3.y - SC1.y) * t;
        }

        function calcEnd(t) {
          End.x =
            Math.pow(1 - t, 3) * P0.x +
            3 * t * Math.pow(1 - t, 2) * P1.x +
            3 * P2.x * Math.pow(t, 2) * (1 - t) +
            Math.pow(t, 3) * P3.x;
          End.y =
            Math.pow(1 - t, 3) * P0.y +
            3 * t * Math.pow(1 - t, 2) * P1.y +
            3 * P2.y * Math.pow(t, 2) * (1 - t) +
            Math.pow(t, 3) * P3.y;
        }

        const step = (currentTime) => {
          !startTime && (startTime = currentTime);
          let elapsedTime = currentTime - startTime;
          let progress = Math.min(elapsedTime / duration, 1);

          ctx.beginPath();
          ctx.moveTo(P0.x, P0.y);
          calcEnd(progress);
          calcSC1(progress);
          calcSC3(progress);
          calcSC2(progress);
          ctx.bezierCurveTo(SC1.x, SC1.y, SC2.x, SC2.y, End.x, End.y);
          ctx.strokeStyle = color;
          ctx.stroke();

          if (progress < 1) {
            requestAnimationFrame(step);
          } else {
            console.log("Completed");
            cb();
          }
        };

        requestAnimationFrame(step);
      }

      document
        .querySelector("#executeButton")
        .addEventListener("click", function () {
          drawThirdOrderBezier(ctx, P0, P1, P2, P3, 1200, null, function () {
            console.log("呵呵");
          });
        });
    </script>
  </body>
</html>