径向动画图

要创建一个径向动画图，可以使用HTML5的Canvas元素和JavaScript来实现。下面是一个代码示例：

HTML部分：

<canvas id="myCanvas" width="400" height="400"></canvas>

JavaScript部分：

// 获取Canvas元素
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 设置圆心坐标和半径
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 100;

// 定义动画帧数和每帧的角度增量
var frames = 60;
var angleIncrement = (2 * Math.PI) / frames;

// 定义当前帧数和初始角度
var currentFrame = 0;
var currentAngle = 0;

// 定义动画函数
function animate() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 计算当前帧对应的角度
  currentAngle = currentFrame * angleIncrement;

  // 计算圆周上点的坐标
  var x = centerX + Math.cos(currentAngle) * radius;
  var y = centerY + Math.sin(currentAngle) * radius;

  // 绘制圆周上的点
  ctx.beginPath();
  ctx.arc(x, y, 5, 0, 2 * Math.PI);
  ctx.fillStyle = "red";
  ctx.fill();

  // 更新帧数
  currentFrame++;

  // 循环播放动画
  if (currentFrame >= frames) {
    currentFrame = 0;
  }

  // 递归调用动画函数
  requestAnimationFrame(animate);
}

// 启动动画
animate();

这段代码会在Canvas中绘制一个半径为100的圆周上的点，点会沿着圆周按顺时针方向进行动画。你可以根据自己的需求调整圆心坐标、半径、帧数、角度增量等参数来实现不同的效果。