如何实现红色从圆周起点出发持续填充行进至原点的循环动画

下面提供两种实用的实现方式，分别适配不同场景需求：

方法一：CSS 锥形渐变动画 #

这种方式代码简洁，无需依赖JS，适合快速实现基础的圆周填充效果。

实现代码 #

<div class="circle"></div>

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  /* 初始状态：仅在顶部（A点）显示0范围的红色 */
  background: conic-gradient(red 0deg, transparent 0deg);
  /* 3秒线性完成填充，结束后保持最终状态 */
  animation: fill-circle 3s linear forwards;
}

@keyframes fill-circle {
  to {
    /* 最终状态：红色填充整个360度圆周 */
    background: conic-gradient(red 360deg, transparent 360deg);
  }
}

自定义起点调整 #

如果A点不在顶部而是其他位置（比如右侧），只需调整渐变的起始角度：

/* 起点为右侧的初始样式 */
background: conic-gradient(red 90deg, transparent 90deg);

/* 对应动画终点角度：90+360=450deg */
@keyframes fill-circle {
  to {
    background: conic-gradient(red 450deg, transparent 450deg);
  }
}

方法二：Canvas 绘制动画 #

这种方式灵活性更高，可自定义填充速度、路径样式，适合需要复杂交互或视觉定制的场景。

实现代码 #

<canvas id="circleCanvas" width="200" height="200"></canvas>

const canvas = document.getElementById('circleCanvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 90;
// 初始角度设为1.5π（对应顶部A点，右侧则设为0）
let currentAngle = Math.PI * 1.5;

function draw() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制填充区域
  ctx.beginPath();
  ctx.moveTo(centerX, centerY); // 从圆心出发
  // 绘制从起点到当前角度的圆弧
  ctx.arc(centerX, centerY, radius, Math.PI * 1.5, currentAngle);
  ctx.closePath();
  ctx.fillStyle = 'red';
  ctx.fill();
  
  // 绘制圆形外边框
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
  ctx.strokeStyle = '#000';
  ctx.stroke();
  
  // 递增角度，控制填充速度
  currentAngle += 0.02;
  // 直到完成一整圈（起点角度+2π）
  if (currentAngle <= Math.PI * 1.5 + Math.PI * 2) {
    requestAnimationFrame(draw);
  }
}

// 启动动画
draw();

内容的提问来源于stack exchange，提问作者Mohammed Hamdan