js圆形转动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆形转动</title>
<style>
  canvas {
    display: block;
    margin: 50px auto;
    background: #f0f0f0;
  }
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  let angle = 0;

  function drawCircle() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
    ctx.save(); // 保存当前状态
    ctx.translate(canvas.width / 2, canvas.height / 2); // 移动到中心
    ctx.rotate(angle); // 旋转
    ctx.beginPath();
    ctx.arc(0, 0, 100, 0, Math.PI * 2); // 绘制圆形
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 5;
    ctx.stroke();
    ctx.restore(); // 恢复之前保存的状态

    angle += 0.05; // 增加旋转角度
    requestAnimationFrame(drawCircle); // 请求下一帧动画
  }

  drawCircle(); // 开始动画
</script>
</body>
</html>