css/wave/02.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html,
    body {
      height: 100%;
      text-align: center;
    }

    #canvas {
      box-sizing: content-box;
      padding: 5px;
      background-color: #fff;
      border-radius: 100%;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      border: 10px solid rgba(154, 205, 50, .8);
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="200" height="200"></canvas>
  <script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin="anonymous"></script>
  <script>
    $(function () {
      let canvas = $("canvas");
      let ctx = canvas[0].getContext('2d');
      let radians = (Math.PI / 180) * 180;
      let startTime = Date.now();
      let time = 2000;
      let clockwise = 1;
      let cp1x, cp1y, cp2x, cp2y;

      // 初始状态
      // ctx.bezierCurveTo(90, 28, 92, 179, 200, 100);
      // 末尾状态
      // ctx.bezierCurveTo(145, 100, 41, 100, 200, 100);

      requestAnimationFrame(function waveDraw() {
        let t = Math.min(1.0, (Date.now() - startTime) / time);

        if (clockwise) {
          cp1x = 90 + (55 * t);
          cp1y = 28 + (72 * t);
          cp2x = 92 - (51 * t);
          cp2y = 179 - (79 * t);
        } else {
          cp1x = 145 - (55 * t);
          cp1y = 100 - (72 * t);
          cp2x = 41 + (51 * t);
          cp2y = 100 + (79 * t);
        }

        ctx.clearRect(0, 0, 200, 200);
        ctx.beginPath();
        ctx.moveTo(0, 100);
        // 绘制三次贝塞尔曲线
        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100);
        // 绘制圆弧
        ctx.arc(100, 100, 100, 0, radians, 0);
        ctx.fillStyle = "rgba(154, 205, 50, .8)";
        ctx.fill();
        ctx.save();

        if (t == 1) {
          startTime = Date.now();
          clockwise = !clockwise;
        }

        requestAnimationFrame(waveDraw);
      });
    })
  </script>
</body>

</html>