jq turntable draw

Before the project, a lottery was written, and after you wrote it yourself, record it.

First 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>

Then 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;
}

I won't say much about the style.

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

        mycanvas ();   // Draw the dial 
        clickRotate (); 
        $ ( 'body'). css ('opacity', '1' );   
    } 
    let commodityarr = [// This is the picture when you use the data display area of ​​the item Location change. 
        {name: 'iPhone11', img: '/Content/Images/newjf/wupa2.png' }, 
        {name: 'Smart Watch', img: '/Content/Images/newjf/wupa5.png' }, 
        {name:
        {name: 'Bluetooth headset', img: '/Content/Images/newjf/wupa4.png' }, 
        {name: 'Red Rice Note7', img: '/Content/Images/newjf/wupa3.png' }, 
        { name: 'Chang Qing Yogurt', img: '/Content/Images/newjf/wupa6.png' }, 
        {name: 'Brown Charcoal Burning', img: '/Content/Images/newjf/wupa1.png' },               
        { name: ' Continue to work hard ', img: '' }, 
    ]; 
    var commodityarrname = ['iPhone11', 'Smart Watch', 'Come Again', 'Bluetooth Headset', 'Red Rice Note7', 'Changqing Yogurt', ' Brown charcoal burning ',' Continuous efforts' ,];
    // Drawing data 
    function mycanvas () {// Draw the dial 
         var num = 8;    // Number of prizes
        var c = document.getElementById ("dial" );  
         var ctx = c.getContext ("2d" ); 

        for ( var i = 0; i <num; i ++ ) {
             // Save current state 
            ctx.save ();
             / / Start a new path 
            ctx.beginPath ();
             // Displace to the center of the circle, the following needs to be rotated around the center of the circle 
            ctx.translate (505,505 );
             // Define a new sub-path starting from (0, 0) coordinates 
            ctx.moveTo (0 , 0 );
             // rotate radians, you need to convert the angle to radians, use degrees * Math.PI / 180 formula to calculate. 
            ctx.rotate ((360 / num * i + 360 / num / 2) * Math.PI / 180);
             // Draw arc 
            ctx.arc (0, 0,495, 0, 2 * Math.PI / num, false );
             if (i% 2 == 0 ) { 
                ctx.fillStyle = '# 43b2ef' ; 
            } else { 
                ctx.fillStyle = '# e3f6ff' ; 
            } 
            // Fill fan 
            ctx.fill ();
             // Draw border 

            // Restore the previous state 
            ctx.restore (); 
        } 
        // Add items; 
        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>`                 ); 
        } 
    } // Click to rotate function roter (s, a) {// s degree a is the winning index 
        $ ( '.turntable_zhan_xz'). css ({transform: ' rotate ('+ s +' deg) ' }) 
        setTimeout ( function () {
             if (a! = 7 ) { 
                alert ( ' Congratulations on your gain '+ commodityarrname [a]);
            } else {

       

    
    
        
                alert ( 'It's a pity! No winnings ' ) 
            } 
            
        }, 3200 ) 
        
    } 
    // Click to rotate 
    function clickRotate () { 
　　　　　var cs = 8; // Number of turntables　　　　　
         var str = 0;    // Rotation degree 
        var num = 0;    // Subtract excess degrees 
        var des = 0;   // Random item subscript 
        $ ('. Yuanpan_lijicj'). Click ( function () { 
            des = Math.floor (Math.random () * 8) +1;   // random items 
            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 (p, 5)
                     break ;
                case 7 : 
                    num = str% 360 ; 
                    str + = 360 * 8 - num - (360 / cs) * 6 ; 
                    num = str% 360 ; 
                    roter (p, 6 )
                     break ;
                case 8 : 
                    num = str% 360 ; 
                    str + = 360 * 8 - num - (360 / cs) * 7 ; 
                    num = str% 360 ; 
                    Roter (str,7)
                    break;
            }
            
        })
        
    }

There is no probability of writing here. Control probability control control this just fine

 

 

effect