幸运大转盘

.container { display: flex; flex-direction: column; align-items: center; font-family: Arial, sans-serif; } #wheelCanvas { border: 2px solid #333; border-radius: 50%; margin-bottom: 20px; } #spinButton { padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 5px; } #spinButton:hover { background-color: #45a049; } const canvas = document.getElementById('wheelCanvas'); const ctx = canvas.getContext('2d'); const spinButton = document.getElementById('spinButton'); const prizes = [ { name: '一等奖', probability: 0.05, color: '#FF5733' }, { name: '二等奖', probability: 0.1, color: '#33FF57' }, { name: '三等奖', probability: 0.15, color: '#5733FF' }, { name: '谢谢参与', probability: 0.3, color: '#FFFF33' }, { name: '再接再厉', probability: 0.4, color: '#33FFFF' } ]; const wheelRadius = canvas.width / 2; const centerX = wheelRadius; const centerY = wheelRadius; let rotationAngle = 0; let spinning = false; let animationFrameId; function drawWheel() { ctx.clearRect(0, 0, canvas.width, canvas.height); let startAngle = 0; prizes.forEach((prize, index) => { const arcAngle = (2 * Math.PI) / prizes.length; const endAngle = startAngle + arcAngle; ctx.fillStyle = prize.color; ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.arc(centerX, centerY, wheelRadius, startAngle, endAngle); ctx.closePath(); ctx.fill(); ctx.fillStyle = 'black'; ctx.font = '14px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; const textX = centerX + Math.cos(startAngle + arcAngle / 2) * (wheelRadius * 0.7); const textY = centerY + Math.sin(startAngle + arcAngle / 2) * (wheelRadius * 0.7); ctx.fillText(prize.name, textX, textY); startAngle = endAngle; }); // Draw pointer ctx.fillStyle = 'black'; ctx.beginPath(); ctx.moveTo(centerX, centerY - wheelRadius - 10); ctx.lineTo(centerX - 10, centerY - wheelRadius - 30); ctx.lineTo(centerX + 10, centerY - wheelRadius - 30); ctx.closePath(); ctx.fill(); } function spinWheel() { if (spinning) return; spinning = true; rotationAngle = 0; const targetRotation = Math.random() * 3600 + 720; // Spin at least 2 rounds const duration = 5000; // 5 seconds spin duration let startTime; function animate(currentTime) { if (!startTime) startTime = currentTime; const elapsedTime = currentTime - startTime; const progress = Math.min(elapsedTime / duration, 1); const ease = easeOutCubic(progress); // Easing function for deceleration rotationAngle = targetRotation * ease; canvas.style.transform = `rotate(${rotationAngle}deg)`; if (progress < 1) { animationFrameId = requestAnimationFrame(animate); } else { spinning = false; determinePrize(); } } animationFrameId = requestAnimationFrame(animate); } function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); } function determinePrize() { const normalizedRotation = rotationAngle % 360; const prizeIndex = Math.floor(prizes.length - (normalizedRotation / (360 / prizes.length))) % prizes.length; const selectedPrize = prizes[prizeIndex]; alert('恭喜您获得：' + selectedPrize.name); } spinButton.addEventListener('click', spinWheel); drawWheel();