当前位置：首页 > JavaScript

js实现抽奖转盘效果

2026-04-04 11:06:58JavaScript

实现抽奖转盘效果

抽奖转盘通常由旋转动画和结果判定两部分组成。以下是一个基于Canvas和JavaScript的实现方案：

js实现抽奖转盘效果

初始化Canvas和转盘绘制

const canvas = document.getElementById('wheel');
const ctx = canvas.getContext('2d');
const segments = ['一等奖', '二等奖', '三等奖', '谢谢参与', '再来一次'];
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'];
const center = { x: canvas.width/2, y: canvas.height/2 };
const radius = Math.min(canvas.width, canvas.height)/2 - 10;

function drawWheel() {
    const arcAngle = (2 * Math.PI) / segments.length;

    segments.forEach((segment, index) => {
        ctx.beginPath();
        ctx.fillStyle = colors[index];
        ctx.moveTo(center.x, center.y);
        ctx.arc(center.x, center.y, radius, 
                index * arcAngle, (index + 1) * arcAngle);
        ctx.lineTo(center.x, center.y);
        ctx.fill();

        // 绘制文本
        ctx.save();
        ctx.translate(center.x, center.y);
        ctx.rotate(index * arcAngle + arcAngle/2);
        ctx.textAlign = 'right';
        ctx.fillStyle = '#fff';
        ctx.font = '16px Arial';
        ctx.fillText(segment, radius - 10, 5);
        ctx.restore();
    });
}

实现旋转动画

let currentRotation = 0;
let isSpinning = false;

function spin() {
    if(isSpinning) return;

    isSpinning = true;
    const spinTime = 3000; // 旋转总时间
    const startTime = Date.now();
    const targetRotation = currentRotation + 10 + Math.random() * 20;

    function animate() {
        const elapsed = Date.now() - startTime;
        const progress = Math.min(elapsed / spinTime, 1);
        const easeOut = 1 - Math.pow(1 - progress, 3);
        currentRotation = easeOut * targetRotation;

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        ctx.translate(center.x, center.y);
        ctx.rotate(currentRotation);
        ctx.translate(-center.x, -center.y);
        drawWheel();
        ctx.restore();

        if(progress < 1) {
            requestAnimationFrame(animate);
        } else {
            isSpinning = false;
            determineResult();
        }
    }

    requestAnimationFrame(animate);
}

function determineResult() {
    const normalizedRotation = currentRotation % (2 * Math.PI);
    const segmentAngle = (2 * Math.PI) / segments.length;
    const winningIndex = Math.floor(
        (2 * Math.PI - normalizedRotation) / segmentAngle
    ) % segments.length;

    alert(`恭喜获得: ${segments[winningIndex]}`);
}

HTML结构

<canvas id="wheel" width="400" height="400"></canvas>
<button onclick="spin()">开始抽奖</button>

CSS样式

#wheel {
    display: block;
    margin: 0 auto;
    background: #f5f5f5;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}