js椭圆旋转轨迹

要实现椭圆旋转轨迹的效果，可以使用以下步骤：

1. 创建一个椭圆形状的 HTML 元素，可以使用 CSS 的 border-radius 属性设置为 50% 实现。

2. 使用 JavaScript 获取该元素的位置和大小，可以使用 getBoundingClientRect() 方法。

3. 计算椭圆的中心点坐标，可以使用元素的左上角坐标加上宽度和高度的一半。

4. 使用 setInterval() 方法循环执行一个函数，该函数可以设置元素的位置，以实现旋转的效果。

5. 在该函数中，可以使用正弦和余弦函数计算椭圆上某一点的坐标，然后设置元素的位置为该点坐标。

6. 可以根据需要设置旋转的速度、方向等参数。

下面是一个简单的示例代码：

HTML:

<div class="ellipse"></div>

CSS:

.ellipse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
}

JavaScript:

const ellipse = document.querySelector('.ellipse');
const rect = ellipse.getBoundingClientRect();
const cx = rect.left + rect.width / 2;
const cy = rect.top + rect.height / 2;
let angle = 0;

setInterval(() => {
  const x = cx + Math.cos(angle) * rect.width / 2;
  const y = cy + Math.sin(angle) * rect.height / 2;
  ellipse.style.left = x + 'px';
  ellipse.style.top = y + 'px';
  angle += Math.PI / 180; // 每次旋转 1 度
}, 10);