使用js绘制一个动画效果。动画效果描述，有十个空心大圈，他们互相嵌套，效果类似箭靶

在JavaScript中创建这样一个空心大圆环动画效果，你可以使用HTML5的Canvas API，结合CSS样式和JavaScript事件处理来实现。以下是一个简单的步骤概述：

1. **HTML结构**:
创建一个包含十个`<canvas>`元素的容器，每个canvas代表一个圆环。

<div id="target">
  <canvas id="ring1"></canvas>
  <!-- ...重复九次... -->
  <canvas id="ring10"></canvas>
</div>

2. **CSS样式**:
定义圆环的初始样式，包括大小、位置以及外边距，使其看起来像箭靶。

#target {
  position: relative;
  width: 400px;
  height: 400px;
}

.canvas-circle {
  position: absolute;
}

3. **JavaScript代码**:
- 获取每个`canvas`并设置其宽度和高度。
- 绘制圆形路径，填充颜色用于创建内圆，描边用于显示轮廓。
- 使用requestAnimationFrame创建动画循环，每次更新圆环的位置和大小。

let rings = Array.from(document.querySelectorAll('#target canvas'));
let radius = 200; // 空心圆环半径
let outerRadius = 210; // 内圆半径
let angle = 0;

function drawRing(canvas, i) {
  let ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(outerRadius + i * (radius / 9), outerRadius + i * (radius / 9), radius / 2, 0, Math.PI * 2);
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 5;
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(radius + i * (radius / 9), radius + i * (radius / 9), radius / 2, 0, Math.PI * 2);
  ctx.fillStyle = 'transparent'; // 或者选择你喜欢的颜色
  ctx.fill();
}

function animate() {
  for (let i = 0; i < rings.length; i++) {
    drawRing(rings[i], i);
  }
  
  angle += 0.01; // 缓慢增加角度
  if (angle > 2 * Math.PI) angle = 0; // 重复动画

  requestAnimationFrame(animate);
}

// 开始动画
animate();