canvas 太极![image.png](https://p1-juejin.byteimg.com/tos-cn-i

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    canvas {
      border: 1px solid;
      background-color: #ccc;
    }
  </style>
  <body>
    <canvas width="600" height="600"></canvas>
  </body>
  <script>
    let canvas = document.querySelector("canvas");
    let ctx = canvas.getContext("2d");

    //左半圆
    ctx.translate(300, 300);
    ctx.beginPath();
    ctx.save();
    ctx.rotate((90 * Math.PI) / 180);
    ctx.arc(0, 0, 200, 0, Math.PI);
    ctx.restore();
    ctx.stroke();
    ctx.fillStyle = "#000";
    ctx.fill();
    ctx.closePath();

    //右半圆
    ctx.beginPath();
    ctx.save();
    ctx.moveTo(0, 0);
    ctx.rotate((270 * Math.PI) / 180);
    ctx.arc(0, 0, 200, 0, Math.PI);
    ctx.restore();
    ctx.strokeStyle = "#fff";
    ctx.stroke();
    ctx.fillStyle = "#fff";
    ctx.fill();
    ctx.closePath();

    //上圆
    ctx.beginPath();
    ctx.arc(0, -100, 100, 0, 2 * Math.PI);
    ctx.strokeStyle = "red";
    ctx.fillStyle = "#fff";
    ctx.fill();
    ctx.closePath();

    //下圆
    ctx.beginPath();
    ctx.arc(0, 100, 100, 0, 2 * Math.PI);
    ctx.fillStyle = "#000";
    ctx.fill();
    ctx.closePath();

    //上小圆
    ctx.beginPath();
    ctx.arc(0, -100, 20, 0, 2 * Math.PI);
    ctx.fillStyle = "#000";
    ctx.fill();
    ctx.closePath();

    //下小圆
    ctx.beginPath();
    ctx.arc(0, 100, 20, 0, 2 * Math.PI);
    ctx.fillStyle = "#fff";
    ctx.fill();
    ctx.closePath();
  </script>
</html>