js实现圆周

JavaScript 实现圆周运动

在 JavaScript 中实现圆周运动通常涉及三角函数（Math.sin 和 Math.cos）来计算圆周上的点坐标。以下是几种常见的实现方式：

使用 Canvas 绘制圆周运动

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let angle = 0;
const radius = 50;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

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

    // 绘制圆和运动点
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(x, y, 5, 0, Math.PI * 2);
    ctx.fill();

    angle += 0.05;
    requestAnimationFrame(animate);
}

animate();

使用 CSS 和 JavaScript 实现圆周运动

通过动态更新 CSS 的 transform 属性实现圆周运动：

const element = document.getElementById('circle');
let angle = 0;
const radius = 100;

function animate() {
    const x = Math.cos(angle) * radius;
    const y = Math.sin(angle) * radius;

    element.style.transform = `translate(${x}px, ${y}px)`;
    angle += 0.05;
    requestAnimationFrame(animate);
}

animate();

参数说明

• angle：当前角度（弧度制），随时间递增。
• radius：圆周运动的半径。
• centerX 和 centerY：圆心坐标（Canvas 示例中为画布中心）。

扩展：椭圆运动

通过调整 x 和 y 方向的半径，可以实现椭圆运动：

const x = centerX + Math.cos(angle) * radiusX;
const y = centerY + Math.sin(angle) * radiusY;

性能优化

• 使用 requestAnimationFrame 实现平滑动画。
• 避免频繁的 DOM 操作（如 CSS 示例中可缓存 transform 值）。