SOURCE

var canvas = $('<canvas>').appendTo('.box')[0];
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 200;

var lineHeight = 10,
    color = '#000',
    size = canvas.width / 2;

ctx.lineWidth = 0
ctx.fillStyle = '#f00';
ctx.font = "'10px '+ lineHeight +'+' 微软雅黑'";
ctx.textAlign = 'center';
ctx.translate(size,size)


var prizes = [
    {text:"10M\n省内流量"}
    ,{text:"20M\n省内流量"},
    {text:"30M\n省内流量"}
    ,{text:"40M\n省内流量"},
    {text:"50M\n省内流量"},{text:"60M\n省内流量"},
    {text:"70M\n省内流量"},{text:"80M\n省内流量"},
    {text:"90M\n省内流量"},{text:"100M\n省内流量"},
]
var itemDeg = 360/prizes.length;

var j = 0;
function renderBg(deg){
    console.log(degToAngel(deg))
    ctx.rotate(degToAngel(deg));
    ctx.rotate(degToAngel(-itemDeg/2));
    ctx.save();
    $.each(prizes,(i,prize) => {
        ctx.rotate(degToAngel(itemDeg));
        ctx.save();
        ctx.fillStyle = i%2 == 0 ? '#fff' : '#feea79';
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.arc(0,0,size,degToAngel(-90-itemDeg/2),degToAngel(-90+itemDeg/2));
        ctx.fill();
        ctx.restore();
        ctx.closePath();
        ctx.textAlign = 'center';
        ctx.fillStyle = color;
        lineFeed(prize.text,lineHeight);
        ctx.stroke();
    })
    ctx.restore();
}
renderBg();
function now() {
    return  window.performance && window.performance.now 
        ? window.performance.now() 
        : Date.now();
}
var deg = 0;
function rotate(){
    var startTime = now();
    var mydeg = deg;
    (function rt(){
        var timeElapsed = now() - startTime;
        var curDeg = timeElapsed * 0.002;
        this.deg = curDeg;
        if(curDeg < 10){
            renderBg(curDeg)
        }
        
        setTimeout(rt,1000)
    })();
    
}
rotate();
// 
// renderBg(50);
// 角度转弧度
function degToAngel(deg) {
    return Math.PI / 180 * (deg % 360);
}
// setInterval(function(){
//     renderBg(45)
// },1000)
// 换行
function lineFeed(str,lineHeight= 10){
    str.split('\n').map((item,index) =>{
        ctx.fillText(item,0,-80+lineHeight*index);
    })
}

<div class="box"></div>

canvas{
    border:1px solid #d3d3d3;
}