SOURCE

window.addEventListener('load', function () {
    var num = 6; // 奖品数量
    if (num % 2 !== 0) {
        alert('请配置偶数奖项');
    }
    var canvas = document.getElementById('canvas');
    var btn = document.getElementById('btn');
    if (!canvas.getContext) {
        alert('抱歉！浏览器不支持。');
        return;
    }
    // 获取绘图上下文
    var ctx = canvas.getContext('2d');
    for (var i = 0; i < num; i++) {
        // 保存当前状态
        ctx.save();
        // 开始一条新路径
        ctx.beginPath();
        // 位移到圆心，下面需要围绕圆心旋转
        ctx.translate(150, 150);
        // 从(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, 150, 0, 2 * Math.PI / num, false);
        // if (i % 2 == 0) {
        //   ctx.fillStyle = '#ffb820';
        // } else {
        //   ctx.fillStyle = '#ffcb3f';
        // }
        if (i == 0 || i == 3) {
            ctx.fillStyle = '#fffefa';
        }
        if (i == 1 || i == 4) {
            ctx.fillStyle = '#fff2d1';
        }
        if (i == 2 || i == 5) {
            ctx.fillStyle = '#ffe49d';
        }
        // 填充扇形
        ctx.fill();
        // 绘制边框
        ctx.lineWidth = 0.5;
        ctx.strokeStyle = '#f48d24';
        ctx.stroke();

        // 文字
        switch (i) {
            case 0:
                var img = new Image();
                img.src = "//img10.360buyimg.com/imgzone/jfs/t1/167161/10/2181/873/600553b0Eefb1c777/4796b618cc36dd17.png";
                img.onload = function () {
                    ctx.drawImage(img, 170, 220, img.width, img.height);
                }
                break;
            case 1:
                var img3 = new Image();
                img3.src = "//img10.360buyimg.com/imgzone/jfs/t1/169099/21/3187/917/600553b0Eeb64d22b/2be69aa6c834826d.png";
                img3.onload = function () {
                    ctx.drawImage(img3, 50, 220, img3.width, img3.height);
                }
                break;
            case 2:
                var img1 = new Image();
                img1.src = "//img10.360buyimg.com/imgzone/jfs/t1/160022/1/20087/737/600553b0E60b478b3/c7e1e1be96a3ec3e.png";
                img1.onload = function () {
                    ctx.drawImage(img1, 20, 110, img1.width, img1.height);
                }
                break;
            case 3:
                var img4 = new Image();
                img4.src = "//img10.360buyimg.com/imgzone/jfs/t1/166186/24/3237/942/600553b0E8ecab403/19b2f9d8181b0d7f.png";
                img4.onload = function () {
                    ctx.drawImage(img4, 55, 25, img4.width, img4.height);
                }
                break;
            case 4:
                var img2 = new Image();
                img2.src = "//img10.360buyimg.com/imgzone/jfs/t1/154603/14/15196/769/600553b0Eaab80d25/568d00ffdfd22714.png";
                img2.onload = function () {
                    ctx.drawImage(img2, 170, 30, img2.width, img2.height);
                }
                break;
            case 5:
                var img5 = new Image();
                img5.src = "//img10.360buyimg.com/imgzone/jfs/t1/158823/10/3563/808/600553b0E87d81d2f/18394bc2a8066316.png";
                img5.onload = function () {
                    ctx.drawImage(img5, 250, 110, img5.width, img5.height);
                }
                break;

        }

        // 文字
        // ctx.fillStyle = '#d20000';
        // ctx.font = "16px sans-serif";
        // ctx.fillText(i + 1, 100, 60);
        // if (i == 1 || i == 3 || i == 5) {
        //     ctx.fillText('参与奖', 100, 60);
        // }

        // 恢复前一个状态
        ctx.restore();
    }

    // 抽奖
    var degr = 1800;
    btn.onclick = function () {
        var rdm = Math.random()*10;
        var a1 = 0.2;   //0.2-0.3   3
        var a2 = 0.4;   // 2
        var a3 = 0.6;   // 1
        var a4 = 0.7;   // 0.7-0.8  6
        var a5 = 0.9;   // 5
        var a5 = 1.1;   // 4
        console.log('随机数：' + rdm);
        canvas.style.transform = "rotate(" + (degr + 1.1 * 360) + "deg)";
        degr = degr + 1800;
    }

}, false);

<div id="turntable">
  <canvas id="canvas" width="300" height="300"></canvas>
  <a id="btn" href="javascript:;"></a>
</div>

#turntable {
    position: relative;
    /* width: 5.59rem;
    height: 5.09rem;
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/166741/37/3347/20132/6005429cE27e445ae/05ecf2420bd59c56.png');
    background-size: 1005 100%; */
}

#canvas {
    //border: 1px solid #000;
    -webkit-transform: all 6s ease;
    transition: all 6s ease;
}

#btn {
    position: absolute;
    left: 110px;
    top: 90px;
    width: 80px;
    height: 100px;
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/170943/32/3306/4705/60054a82E034fd90a/1c9d7d88f383cdb4.png');
    background-size: 100% 100%;
    /* border-radius: 50%; */
    /* background-color: #d20000; */
    /* line-height: 60px;
    text-align: center;
    font-size: 0.16rem; */
}

/* #btn:after { */
    /* position: absolute;
    display: block; */
    /* content: ''; */
    /* left: 10px;
    top: -32px;
    width: 0;
    height: 0;
    overflow: hidden; */
    /* border-width: 20px;
    border-style: solid;
    border-color: transparent; */
    /* border-bottom-color: #d20000; */
/* } */