转盘抽奖，使用svg和原生js编写。简单清晰！

1.首先，先上图片给大家看看转盘的样子。

2.然后我们先搭建一下结构。 这里呢，我们需要使用svg画布完成圆盘以及指针的绘制，需要旋转不同的rotate，需要用到path路径，text文本绘制的知识，废话不多说我们先上代码。

    <div id="content">
        <!-- 圆盘 -->
        <div id="truntable">
            <!--圆 - circle元素;r：圆的半径。cx：圆心 坐标x值。cy：圆心 坐标y值。-->
            <svg width="500" height="500" id="svg1"  transform="rotate(60)">
                <!--包含下面圆弧的圆作为边框-->
                <circle cx="250" cy="250" r="200" stroke="rgb(247, 204, 11)" fill="transparent" stroke-width="10" />
                <!--60度圆弧拼成一个圆盘 -->
                <!--正上方1/6圆弧，以下都是顺时针的1/6圆弧 -->
                <path d="M 150 76.8 A 200 200, 0, 0, 1, 350 76.8 L 250 250 Z" fill="rgb(254, 119, 116)" stroke="#FFBE46"
                    stroke-width="1" />
                <!--抽奖正上方1/6圆弧内文字-->
                <text x="200" y="116.8" transform="rotate(0)" fill="rgb(249, 254, 253)">罚抄次数10</text>
                <!--2/6圆弧-->
                <path d="M 350 76.8 A 200 200, 0, 0, 1, 450 250 L 250 250 Z" fill="rgb(254, 204, 109)" stroke="#FFBE46"
                    stroke-width="1" />
                <!--抽奖正上方2/6圆弧内文字-->
                <text x="300" y="-236.8" transform="rotate(60)" fill="rgb(249, 254, 253)">罚抄次数20</text>

                <!--3/6圆弧-->
                <path d="M 450 250 A 200 200, 0, 0, 1, 350 423.3 L 250 250 Z" fill="rgb(254, 119, 116)" stroke="#FFBE46"
                    stroke-width="1" />
                <!--抽奖正上方3/6圆弧内文字-->
                <text x="50" y="-476.8" transform="rotate(120)" fill="rgb(249, 254, 253)">罚抄次数30</text>

                <!--4/6圆弧-->
                <path d="M 350 423.3 A 200 200, 0, 0, 1, 150 423.3 L 250 250 Z" fill="rgb(254, 204, 109)" stroke="#FFBE46"
                    stroke-width="1" />
                <!--抽奖正上方4/6圆弧内文字-->
                <text x="-300" y="-400" transform="rotate(180)" fill="rgb(249, 254, 253)">罚抄次数25</text>

                <!--5/6圆弧-->
                <path d="M 50 250 A 200 200, 0, 0, 0, 150 423.3 L 250 250 Z" fill="rgb(254, 119, 116)" stroke="#FFBE46"
                    stroke-width="1" />
                <!--抽奖正上方5/6圆弧内文字-->
                <text x="-380" y="-50" transform="rotate(240)" fill="rgb(249, 254, 253)">罚抄次数50</text>

                <!--6/6圆弧-->
                <path d="M 50 250 A 200 200, 0, 0, 1, 150 76.8 L 250 250 Z" fill="rgb(254, 204, 109)" stroke="#FFBE46"
                    stroke-width="1" />
                <!--抽奖正上方6/6圆弧内文字-->
                <text x="-130" y="200" transform="rotate(300)" fill="rgb(249, 254, 253)">罚抄次数40</text>
            </svg>
        </div>
        <!-- 指针 -->
        <div id="pointer">
            <svg width="100" height="100" id="svg2">
                <!--指针-->
                <path d="M 50 0 A 50 50, 0, 1, 0, 100 50 L 100 0 Z" fill="rgb(197, 65, 231)" />
                <!--抽奖指针文字-->
                <text x="35" y="10" transform="rotate(45)" fill="#fff">开始抽奖</text>
            </svg>
        </div>
    </div>

 3.这样以来我们就可以绘制出，基本的圆盘和指针了。接下来就可以简单设置下样式了。

<style type="text/css">
        /*转盘背景*/
        #content {
            width: 500px;
            height: 500px;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
        }

        #truntable {
            width: 500px;
            height: 500px;
        }

        #truntable svg {
            width: 500px;
            height: 500px;
            transition: all 4s ease;
            font-size: 18px;
            font-weight: 700;
        }

        #content #pointer {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 200px;
            left: 200px;
            cursor: pointer;
            transform: rotate(-45deg);
        }

        #content #pointer svg {
            width: 100px;
            height: 100px;
            font-size: 18px;
            font-weight: 700;
        }
        #content #pointer svg:hover path{
            fill: #f40;
        }
    </style>

 4.接下来了，我们需要用js去操纵，圆盘的rotate，让圆盘能够转动。我这里使用了定时器，这样的话就可以让圆盘的rotate在一定时间内发生改变了。

    <script>
        var svg1 = document.getElementById('svg1');
        var svg2 = document.getElementById('svg2');
        var timer  = null;
        svg2.onclick = function (e) {
            // 获取当前转盘的角度
            var current = +svg1.getAttribute('transform').slice(7,-1);
            // console.log(`当前${current}`);
            // 随机一个数并将其存储在num中
            var num = Math.floor(Math.random() * 100)+current;
            // console.log(num);
            // 开启一个定时器,用来改变旋转角度
            timer = setInterval(function () {
                num +=60;
                console.log(num);
                // 定义一个变量存储随机角度
                var rotate = `rotate(${num})`;
                // 改变svg1对象中的transform属性
                svg1.setAttribute("transform",rotate);
            }, 100)
            // 重新定义一个计时器用来解除上一个计时器
            var tiemr1 = setTimeout(function(){
                clearInterval(timer)
            },2000)

            
        }
    </script>