canvas轮盘

作者: SherrinfordL | 来源:发表于2019-03-28 02:14 被阅读0次

canvas轮盘
Canvas动画案例-椭圆轮盘转动
轮盘
轮盘
轮盘
轮盘
iOS 抽奖轮盘效果实现思路
GoDapp带你玩转Roulette游戏
抽奖轮盘
命运轮盘

以前研究canvas留下的东西，不过毕竟比较少做这方面，开始偏向后台，唯一记得就是不断的restore重绘......

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <style>
        .text-center {
            text-align: center;
        }

        .title {
            color: blue;
        }
        .div canvas{
            position: absolute;
            top:0;left:0;
        }
        button{
            width:200px;height:60px;
            color:red;
            font-weight: bold;
            font-size: 30px;
        }
    </style>
</head>
<body class="text-center">
<!--<h2 class="text-center title">抽奖</h2>-->
<div style="width:1200px;height:1200px;margin:50px auto;zoom: 0.5;position: relative;" class="text-center div">
    <!--转盘层的canvas-->
    <canvas id="canvas"></canvas>
    <!--指针所在的canvas-->
    <canvas id="canvas2"></canvas>
</div>
<button onclick="go()">开始抽奖</button>
</body>


<script>
    var colors = ['#33ACB5', '#DF5C5D', '#B4D966', '#5450B3', '#FFD457', '#3A97EA', '#FAA167', '#63CA97', '#9A50B3'];
    //定义人名和对应的颜色
    var data = [
        {name: '胡胡', color: colors[0]},
        {name: 'LUKE', color: colors[1]},
        {name: '雕兄', color: colors[2]},
        {name: '他妹', color: colors[3]},
        {name: '他弟', color: colors[4]},
        {name: 'VUE总', color: colors[5]},
        {name: '二代目工头', color: colors[6]},
        {name: '初代目工头', color: colors[7]},
        {name: '三代目工头', color: colors[8]},
        {name: '痴汉', color: colors[6]},
        {name: '猪头', color: colors[5]}
    ];

    var canvas = document.getElementById('canvas');//转盘所在画布
    var canvas2 = document.getElementById('canvas2'); //指针所在画布
    canvas.width = canvas2.width = 1200;
    canvas.height = canvas2.height = 1200;

    var sector = canvas.getContext("2d"); //每一个区域块
    var hand = canvas2.getContext("2d");  //指针

    var w = canvas.width;
    var h = canvas.height;

    paintName(data);

    //画指针
    hand.fillStyle = "black";
    hand.fillRect(595, 50, 10, 600);
    hand.arc(w/2,h/2,30,0,Math.PI*2);
    hand.fill();

    //绘制转盘
    function paintName(data) {
        var len = data.length;
        var angle = Math.PI * 2 / len;//为每一块分配角度

        for (var i = 0; i < data.length; i++) {
            var item = data[i];

            sector.beginPath();
            sector.moveTo(w / 2, h / 2);
            sector.lineTo(w - 3, h / 2);
            sector.arc(w / 2, h / 2, h / 2 - 3, 0, angle);
            // sector.lineTo(w / 2, h / 2);
            sector.fillStyle = item.color;
            sector.fill();
            // sector.stroke();

            //旋转所渲染的块
            sector.translate(600, 600); // 设置原点为画布中心
            sector.rotate(angle);
            sector.translate(-600, -600); // 恢复画布中心到（0，0）

            sector.save();

            //绘制文字
            sector.translate(900, 600);
            sector.font = "50px Georgia";
            sector.fillStyle = "#fff";
            sector.fillText(item.name, -80, -60);
            sector.translate(-1000, -600);//如果不用save和restore把translate里的1000改为900就好
            sector.restore();
        }
    }

    //点击click的时候调用这个方法
    //我这里有定义了加速度a0,他是随机生成的，所以每次点击开始抽奖的时候，转动的加速度是随机的，这保证了抽奖的随机性
    function go() {
        var time = 3000;
        var a0 = (Math.random()+5) / 100;//保证最小固定加速度为0.05
        var clock = 20;
        var normal = 20;
        var interval = setInterval(function () {
            // var a = time >= 1500 ? a0:-a0;            
            var v = time >= 1500 ? a0 * (3000-time) : a0*1500 + -a0 * (1500-time);//旋转角度
            // clock = v >= 1500 ? clock : clock+60;
            sector.translate(600,600);
            sector.rotate(Math.PI/180 * v);
            sector.translate(-600,-600);
            sector.clearRect(0,0,1200,1200);
            paintName(data);
            time -= normal;

            if(time == 0){
                window.clearInterval(interval);
            }
        },clock)
    }
</script>
</html>

image.png