<body>
<div id="div"></div>
<canvas width=400 height=400 style="border:1px solid"></canvas>
<script>
const canvas = document.querySelector("canvas");
const pen = canvas.getContext("2d");
const pi = Math.PI;
pen.translate(200, 200)
setInterval(function () {
pen.rotate(pi / 180);
//黑色勾玉
pen.beginPath();
pen.arc(0, 0, 200, -1 / 2 * pi, 1 / 2 * pi);
pen.arc(0, 100, 100, 1 / 2 * pi, -1 / 2 * pi);
pen.arc(0, -100, 100, 1 / 2 * pi, -1 / 2 * pi, true);
pen.fillStyle = "black";
pen.closePath();
pen.fill();
//白色勾玉
pen.beginPath();
pen.arc(0, 0, 200, -1 / 2 * pi, 1 / 2 * pi, true);
pen.arc(0, 100, 100, 1 / 2 * pi, -1 / 2 * pi);
pen.arc(0, -100, 100, 1 / 2 * pi, -1 / 2 * pi, true);
pen.fillStyle = "#fff";
pen.closePath();
pen.fill();
pen.stroke();
//黑色小圆
pen.beginPath();
pen.arc(0, -100, 30, 0, 2 * pi);
pen.fillStyle = "black";
pen.closePath();
pen.fill();
//白色小圆
pen.beginPath();
pen.arc(0, 100, 30, 0, 2 * pi);
pen.fillStyle = "#fff";
pen.closePath();
pen.fill();
}, 100);
</script>
</body>
原文：https://www.cnblogs.com/zxq519896763/p/12513743.html