引导转盘问题

// 示例代码：使用HTML5 Canvas实现一个简单的引导转盘
const canvas = document.getElementById('turntable');
const ctx = canvas.getContext('2d');

const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 100;

function drawTurntable() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    ctx.stroke();

    options.forEach((option, index) => {
        const angle = (index / options.length) * 2 * Math.PI;
        const x = centerX + radius * Math.cos(angle);
        const y = centerY + radius * Math.sin(angle);
        ctx.fillText(option, x, y);
    });
}

canvas.addEventListener('mousedown', (e) => {
    let startX = e.clientX;
    let startY = e.clientY;

    canvas.addEventListener('mousemove', (e) => {
        const endX = e.clientX;
        const endY = e.clientY;
        const dx = endX - startX;
        const dy = endY - startY;
        const angle = Math.atan2(dy, dx);

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, angle);
        ctx.stroke();

        options.forEach((option, index) => {
            const optionAngle = (index / options.length) * 2 * Math.PI;
            if (angle >= optionAngle - Math.PI / 4 && angle <= optionAngle + Math.PI / 4) {
                ctx.fillStyle = 'red';
                ctx.fillText(option, centerX + radius * Math.cos(optionAngle), centerY + radius * Math.sin(optionAngle));
                ctx.fillStyle = 'black';
            }
        });
    });

    canvas.addEventListener('mouseup', () => {
        canvas.removeEventListener('mousemove');
        canvas.removeEventListener('mouseup');
    });
});

drawTurntable();

// 示例代码：优化转盘旋转动画
function animateTurntable(angle) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, angle);
    ctx.stroke();

    options.forEach((option, index) => {
        const optionAngle = (index / options.length) * 2 * Math.PI;
        ctx.fillText(option, centerX + radius * Math.cos(optionAngle), centerY + radius * Math.msin(optionAngle));
    });

    if (angle < targetAngle) {
        requestAnimationFrame(() => animateTurntable(angle + 0.02));
    }
}