利用canvas实现抽奖转盘---转载别人的

$.each(data.list,function(key, value){
    turnplate.restaraunts.push(value.data0);
    turnplate.lucky.push(value.data1);
    turnplate.goodsimgArr.push(getLuckyImg + value.data4);
    if(key %2==0)
    turnplate.colors.push("#fff");
    else
    turnplate.colors.push("#5fcbd4");
    })

[
    {
    "data0":"一等奖",
    "data1":"iphone6s",
    "data2":"0",
    "data3":"0",
    "data4":"201510161406303384.png",
    "data5":"XXXX网络科技",
    "data6":"浙江省衢州市柯城区XXXXX",
    "data7":"0570-XXXXXX"
    },......
    ]

turnplate.goodsimgArr.push(‘../images/hongbao.png‘)
    turnplate.restaraunts.push("优胜奖");
    turnplate.colors.push("#5fcbd4");
    //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
    preloadimages(turnplate.goodsimgArr).done(function(images){
    drawRouletteWheel();
    });

//对奖品图片预加载
    function preloadimages(arr){
    var newimages =[], loadedimages =0
    var postaction =function(){}//此处增加了一个postaction函数
    var arr =(typeof arr !="object")?[arr]: arr
    function imageloadpost(){
    loadedimages++
    if(loadedimages == arr.length){
    postaction(newimages)//加载完成用我们调用postaction函数并将newimages数组做为参数传递进去
    }
    }
    for(var i =0; i < arr.length; i++){
    newimages[i]=newImage()
    newimages[i].src = arr[i]
    newimages[i].onload =function(){
    imageloadpost()
    }
    newimages[i].onerror =function(){
    imageloadpost()
    }
    }
    return{//此处返回一个空白对象的done方法
    done:function(f){
    postaction = f || postaction
    }
    }
    }

function drawRouletteWheel(){
    var canvas = document.getElementById("wheelcanvas");
    if(canvas.getContext){
    //根据奖品个数计算圆周角度
    var arc =Math.PI /(turnplate.restaraunts.length /2);
    var ctx = canvas.getContext("2d");
    //在给定矩形内清空一个矩形
    ctx.clearRect(0,0,422,422);
    //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
    ctx.strokeStyle ="rgba(0,0,0,0)";
    //font 属性设置或返回画布上文本内容的当前字体属性
    ctx.font =‘bold 18px Microsoft YaHei‘;
    for(var i =0; i < turnplate.restaraunts.length; i++){
    //根据当前奖品索引 计算绘制的扇形开始弧度
    var angle = turnplate.startAngle + i * arc;
    //根据奖品参数 绘制扇形填充颜色
    ctx.fillStyle = turnplate.colors[i];
    //开始绘制扇形
    ctx.beginPath();
    //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
    //绘制大圆
    ctx.arc(212,212, turnplate.outsideRadius, angle, angle + arc,false);
    //绘制小圆
    ctx.arc(212,212, turnplate.insideRadius, angle + arc, angle,true);
    ctx.stroke();
    ctx.fill();
    //锁画布(为了保存之前的画布状态)
    ctx.save();
    //----绘制奖品开始----
    //奖品默认字体颜色
    ctx.fillStyle ="#fff";
    var text = turnplate.restaraunts[i];
    var lukyname = turnplate.lucky[i];
    var line_height =17;
    //translate方法重新映射画布上的 (0,0) 位置
    ctx.translate(212+Math.cos(angle + arc /2)* turnplate.textRadius,212+Math.sin(angle + arc /2)* turnplate.textRadius);
    //rotate方法旋转当前的绘图
    ctx.rotate(angle + arc /2+Math.PI /2);
    //绘制奖品图片
    var img =newImage();
    img.src = turnplate.goodsimgArr[i];
    ctx.drawImage(img,-17,35);
    //由于设计的转盘色块是交错的，所以这样可以实现相邻奖品区域字体颜色不同
    if(i %2==0){
    ctx.fillStyle ="#f7452f";
    }
    //将字体绘制在对应坐标
    ctx.fillText(text,-ctx.measureText(text).width /2,0);
    //设置字体
    ctx.font =‘ 14px Microsoft YaHei‘;
    //绘制奖品名称
    if(text !="优胜奖"){
    ctx.fillText(lukyname,-ctx.measureText(lukyname).width /2,25);
    }else{
    ctx.fillText("优麦币",-ctx.measureText("优麦币").width /2,25);
    }
    //把当前画布返回（插入）到上一个save()状态之前
    ctx.restore();
    ctx.save();
    //----绘制奖品结束----
    }
    }
    }