jq转盘抽奖

之前项目的时候要写一个抽奖，自己写了以后就记录一下。

先是html

 <div class="turntable_zhan">
       
        <img class="yuanpan_zj" src="~/Content/Images/newjf/jiazhi.png" />
        <img class="yuanpan_jinq" src="~/Content/Images/newjf/lunzhuangd.png" />
        <img class="yuanpan_jinq2" src="~/Content/Images/newjf/lunzhuangc.png" />
        <img class="yuanpan_renwu" src="~/Content/Images/newjf/lunzhuangb.png" />
        <img class="yuanpan_renwu2" src="~/Content/Images/newjf/lunzhuanga.png" />
        <img class="yuanpan_lijicj" src="~/Content/Images/newjf/lunzhuangzong.png" />
        <div class="turntable_zhan_xz">
            <img class="yuanpan" src="~/Content/Images/newjf/zhuangban.png" />
            <canvas id="dial" width="1010" height="1010"></canvas>
            <img class="yuanpan_zzhao" src="~/Content/Images/newjf/turnt_top.png" />

        </div>
    </div>

再是css

@font-face{
font-family: 'hyHei';
src: url('../font/hyliliangheij.ttf');
}

 
.turntable_zhan{
        width:100%;
        height:6.6rem;
        position:relative;
        margin-top:0.8rem;
    }
    .yuanpan{
        position:absolute;
        width:5.78rem;
        height:5.78rem;
        left:0;
        right:0;
        margin:auto;
        z-index:2;
    }
    .yuanpan_zj{
        position:absolute;
        width:2.68rem;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        z-index:1;
    }
    .yuanpan_jinq{
        position:absolute;
        width:1.28rem;
        bottom:-0.15rem;
        left:1.79rem;
        z-index:1;
    }
    .yuanpan_jinq2{
        position:absolute;
        width:6.85rem;
        top:-0.28rem;
        left:0;
        right:0;
        margin:auto;
    }
    .yuanpan_renwu{
        position:absolute;
        width:1.36rem;
        bottom:0;
        left:0.5rem;
        z-index:6;
    }
    .yuanpan_renwu2 {
        position:absolute;
        width:2.1rem;
        bottom:0;
        right:0.54rem;
        z-index:6;
    }
    .yuanpan_lijicj{
            width: 1.54rem;
            position: absolute;
            top: 2rem;
            left: 0;
            right: 0;
            /* bottom: 0; */
            margin: auto;
            z-index: 10;
    }
    #dial{
        position: absolute;
        top: 0.34rem;
        /* bottom: 0; */
        right: 0;
        left: 0;
        margin: auto;
        width: 5.07rem;
        height: 5.07rem;
        z-index: 5;
    }
    .yuanpan_zzhao{
        position:absolute;
        width:5.15rem;
        height:5.15rem;
        top:0.3rem;
        right:0;
        left:0;
        z-index:4;
        margin:auto;
    }

    .turn_commodity_items{
        position:absolute;
        z-index:8;
        font-family:hyHei;
        font-size:0.24rem;        
    }
.turn_commodity_items p{
    position:absolute;
    color:#c5d048;
    text-shadow: #fff 2px 0 0, #fff 0 2px 0, #fff -2px 0 0, #fff 0 -2px 0;
}
.turn_commodity0{
    top: 1rem;
    left: 3.5rem;
}
.turn_commodity0 p{
   top: -0.36rem;
    left: -0.2rem;
}
.turn_commodity0 img{
    width:0.55rem;
}
.turn_commodity1 {
    top: 1.5rem;
    left: 4.4rem;
}
.turn_commodity1 img{
    width:0.72rem;
}
.turn_commodity1 p {
    top: -0.2rem;
    right: -0.75rem;
    width: 1.2rem;
    transform: rotate(45deg);
}
.turn_commodity2 {
    font-size: 0.33rem;
    transform: rotate(90deg);
    width: 0.7rem;
    top: 2.7rem;
    left: 5.3rem;
}
.turn_commodity3{
   top: 3.5rem;
    left: 4.4rem;
}
.turn_commodity3 p{
    width: 1.2rem;
    transform: rotate(135deg);
    top: 0.7rem;
    left: 0.2rem;
}
.turn_commodity3 img{
    width:0.56rem;
}
.turn_commodity4{
    top: 3.8rem;
    left: 3.45rem;
}
.turn_commodity4 p{
    width:1.2rem;
    top:1rem;
    left:-0.26rem;
    transform: rotate(180deg);
}
.turn_commodity4 img{
   width:0.55rem;
   transform: rotate(180deg);
}
.turn_commodity5 {
    top: 3.3rem;
    left: 2.4rem;
}
.turn_commodity5 p{
    width:1.2rem;
    transform:rotate(-135deg);
    top:0.8rem;
    left:-0.8rem;
}
.turn_commodity5 img{
    width:0.84rem;
}
.turn_commodity6 {
    top: 2.7rem;
    left: 2rem;
}
.turn_commodity6 img{
    width:0.8rem;
}
.turn_commodity6 p{
   left:-0.8rem;
    transform:rotate(-90deg);
}
.turn_commodity7{
    font-size: 0.33rem;
    transform: rotate(-45deg);
    width: 0.7rem;
    top: 1.2rem;
    left: 2rem;
}

.turntable_zhan_xz{
    position:inherit;
    z-index:3;
    height: 5.78rem;
    transition:all 3s ease;
}

样式地方我就不多说了。

 window.onload = function () {
        //设置rem  
        let w = $('body').width();
        $('html').css('font-size', w / 7.5 + 'px');

        mycanvas();  //绘制表盘
        clickRotate();
        $('body').css('opacity', '1');  
    }
    let commodityarr = [   //这是物品的数据展示区  使用的时候记得吧图片位置更改。
        { name: 'iPhone11', img: '/Content/Images/newjf/wupa2.png' },
        { name: '智能手表', img: '/Content/Images/newjf/wupa5.png' },
        { name: '再来 一次', img: '' },
        { name: '蓝牙耳机', img: '/Content/Images/newjf/wupa4.png' },
        { name: '红米Note7', img: '/Content/Images/newjf/wupa3.png' },
        { name: '畅轻酸奶', img: '/Content/Images/newjf/wupa6.png' },
        { name: '褐色炭烧', img: '/Content/Images/newjf/wupa1.png' },              
        { name: '再接 再厉', img: '' },
    ];
    var commodityarrname = ['iPhone11', '智能手表', '再来一次', '蓝牙耳机', '红米Note7', '畅轻酸奶', '褐色炭烧', '再接再厉', ];
    //抽奖数据
    function mycanvas() {    //绘制表盘 
        var num = 8;   // 奖品数量
        var c = document.getElementById("dial");  
        var ctx = c.getContext("2d");

        for (var i = 0; i < num; i++) {
            // 保存当前状态
            ctx.save();
            // 开始一条新路径
            ctx.beginPath();
            // 位移到圆心，下面需要围绕圆心旋转
            ctx.translate(505,505);
            // 从(0, 0)坐标开始定义一条新的子路径
            ctx.moveTo(0, 0);
            // 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。
            ctx.rotate((360 / num * i + 360 / num / 2) * Math.PI / 180);
            // 绘制圆弧
            ctx.arc(0, 0,495, 0, 2 * Math.PI / num, false);
            if (i % 2 == 0) {
                ctx.fillStyle = '#43b2ef';
            } else {
                ctx.fillStyle = '#e3f6ff';
            }
            // 填充扇形
            ctx.fill();
            // 绘制边框

            // 恢复前一个状态
            ctx.restore();
        }
        //追加物品;
        for (let i = 0; i < commodityarr.length; i++) {
            $('.turntable_zhan_xz').append(`<div class="turn_commodity_items turn_commodity${i}">
                    <p>${commodityarr[i].name}</p>
                    <img src="${commodityarr[i].img}" />
                 </div>`
                );
        }
    }
       

    //点击旋转
    function roter(s,a) {    //s 度数  a 是中奖的下标
        
        $('.turntable_zhan_xz').css({ transform: 'rotate(' + s + 'deg)' })
        setTimeout(function () {
            if(a != 7){
                alert('恭喜你获得'+commodityarrname[a]);
            } else {
                alert('好可惜！没有中奖')
            }
            
        },3200)
        
    }
    //点击旋转
    function clickRotate() {
　　　　　var cs = 8;   //转盘个数　　　　　
        var str = 0;   //旋转的度数
        var num = 0;   //减去多余的度数
        var des = 0;  //随机的物品下标
        $('.yuanpan_lijicj').click(function () {
            des = Math.floor(Math.random() * 8)+1;  //随机的物品
            console.log(des);
            switch (des) {
                case 1:
                    num = str % 360;
                    str += 360 * 8 - num - (360/cs) * 0;
                    num = str % 360;
                    roter(str,0);
                    break;
                case 2:
                    num = str % 360;
                    str += 360 * 8 - num - (360/cs) * 1;
                    num = str % 360;
                    roter(str,1)
                    break;
                case 3:
                    num = str % 360;
                    str += 360 * 8 - num - (360/cs) * 2;
                    num = str % 360;
                    roter(str,2)
                    break;
                case 4:
                    num = str % 360;
                    str += 360 * 8 - num - (360/cs) * 3;
                    num = str % 360;
                    roter(str,3)
                    break;
                case 5:
                    num = str % 360;
                    str += 360 * 8 - num - (360/cs) * 4;
                    num = str % 360;
                    roter(str,4)
                    break;
                case 6:
                    num = str % 360;
                    str += 360 * 8 - num - (360/cs) * 5;
                    num = str % 360;
                    roter(str,5)
                    break;
                case 7:
                    num = str % 360;
                    str += 360 * 8 - num - (360/cs) * 6;
                    num = str % 360;
                    roter(str,6)
                    break;
                case 8:
                    num = str % 360;
                    str += 360 * 8 - num - (360/cs) * 7;
                    num = str % 360;
                    roter(str,7)
                    break;
            }
            
        })
        
    }

这边没有写概率。控制概率控制控制这个就好

效果