抽獎大轉輪

時間 2019-12-05
標籤抽獎轉輪简体版
原文原文鏈接
基於canvas動畫寫出來的html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">開始</button>
<canvas id="canvas" width="500" height="500">
    您的瀏覽器不支持canvas
</canvas>
<script>
    var btn = document.getElementById('btn'),
     canvas = document.getElementById('canvas'),
     ctx = canvas.getContext('2d'),
     out_r = 200,//外圓半徑
     inner_r = 20,
     text_r = 140,
     center_x = canvas.width/2,
     center_y = canvas.height/2,
     ary = ['Sun','Alex','Scarlett','Shirley','Candy','Lily',"Dived","Ni"],
     start_r = 0,
     average_r = Math.PI *2 / ary.length;//每個弧度快的弧度
    
    function draw() {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for (let i = 0; i < ary.length; i++) {
            //須要知道每一個弧度塊的起始弧度和結束弧度
            let _start = start_r + average_r * i;
            let _end = _start + average_r;
            //畫圓,api存儲啥啥啥的
            ctx.save();
            ctx.beginPath();
            if(i%2 === 0){
                ctx.fillStyle = 'pink';
            }else{
                ctx.fillStyle = 'lightpink';
            }
            ctx.arc(center_x,center_y,out_r,_start,_end,false);//外圓
            ctx.arc(center_x,center_y,inner_r,_end,_start,true);
            ctx.fill();
            ctx.restore();


            ctx.save();
            ctx.font = '16px bold Arial';
            ctx.fillStyle  = '#fff';
            ctx.translate(
                center_x + Math.cos(_start + average_r/2)*text_r,
                center_y + Math.sin(_start+ average_r/2)*text_r,
            );
            ctx.rotate(_start + average_r/2 + Math.PI/2);
            ctx.fillText(ary[i],-ctx.measureText(ary[i]).width/2,0);
            ctx.restore();

            //畫箭頭
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(center_x,center_y);
            ctx.lineTo(center_x - 4,center_y);
            ctx.lineTo(center_x,center_y - 150);

            ctx.lineTo(center_x + 4,center_y);
            ctx.closePath();
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.restore();
        }
    }
    draw();
    
    let duration = 3000,
        runTime = 0,//旋轉的時間
        allTime,//總得旋轉時間
        change;
    // t 當前的運行時間  b 開始時間; c 該變量 ; d 運動總時間
    function easeOut(t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * t * t + b;
        return -c / 2 * ((--t) * (t - 2) - 1) + b;
    };
    function rotate(){
        runTime += 10;
        if (runTime >= allTime) {
            console.log(getValue());
            return;
        }
        let _change = (change - easeOut(runTime,0,change,allTime))/180 * Math.PI;
        start_r += _change;
        draw();
        window.requestAnimationFrame(rotate);
    }
    function getValue(){
        let startA = start_r / Math.PI * 180 ,
            averageA = average_r / Math.PI * 180,
            temp = (startA + 90) % 360,
            res = 360 - temp;
        index = Math.floor(res/averageA);
        return ary[index];
    }
    btn.onclick = function () {
        runTime = 0;
        allTime = Math.random() * 30 + duration;
        change = Math.random() * 10 + 5;
        rotate();
    }

</script>
</body>
</html>

複製代碼
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。