canvas写抽奖大转盘图片和文字

一.用canvas创建一个抽奖大转盘

html

   <canvas class="canvas_wheel" id="wheelcanvas" width="422px" height="422px"></canvas>

js

  	//页面加载时画圆盘
$(document).ready(function(){
	var comiddity = getComiddity()
	//动态添加大转盘的奖品与奖品区域背景颜色
	
	turnplate.restaraunts= comiddity.info;
	turnplate.colors= comiddity.colors;
	var rotateTimeOut = function (){
        $('#wheelcanvas').rotate({
            angle:0,
            animateTo:2160,
            duration:8000,
            callback:function (){
                alert('网络超时，请检查您的网络设置！');
            }
        });
    };
   
  //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
    window.onload=function(){
        drawRouletteWheel();
    };

})

大转盘js代码

* 
 * 用canvas画大转盘
 */

var turnplate={
        restaraunts:[],				//大转盘奖品名称
        colors:[],					//大转盘奖品区块对应背景颜色
        outsideRadius:192,			//大转盘外圆的半径
        textRadius:155,				//大转盘奖品位置距离圆心的距离
        insideRadius:56,			//大转盘内圆的半径
        startAngle:0,				//开始角度
        bRotate:false				//false:停止;ture:旋转
};

    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 = "#FFBE04";
            //font 属性设置或返回画布上文本内容的当前字体属性
            ctx.font = '14px Microsoft YaHei';
            for(var i = 0; i< turnplate.restaraunts.length; i++){
            	var angle = turnplate.startAngle + i * arc;
                var startAngle = 211;
                var text = turnplate.restaraunts[i];
            	ctx.fillStyle = turnplate.colors[i];
            	ctx.beginPath();
            	//arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
            	ctx.arc(startAngle, startAngle, turnplate.outsideRadius, angle, angle + arc, false);
                ctx.arc(startAngle, startAngle, turnplate.insideRadius, angle + arc, angle, true);
                ctx.stroke();
                ctx.fill();
                //锁画布(为了保存之前的画布状态)
                ctx.save();
             
              //----绘制奖品开始----
               
                //translate方法重新映射画布上的 (0,0) 位置
                ctx.translate(startAngle + Math.cos(angle + arc / 2) * turnplate.textRadius, startAngle + Math.sin(angle + arc / 2) * turnplate.textRadius);
           		
                //rotate方法旋转当前的绘图
                ctx.rotate(angle + arc / 2 + Math.PI / 2);

                //添加文字
                addText(text,ctx)
               //添加对应图标
                addImg(text,ctx)
                
                
            }
    	}
    }


 //旋转转盘 item:奖品位置; txt：提示语;
    var rotateFn = function(item,txt,obj,that){
    	var angles = item * (360 / turnplate.restaraunts.length)-(360 / (turnplate.restaraunts.length*2))
    	if(angles<270){
    		angles = 270 - angles;
    	}else{
            angles = 360 - angles + 270;
        }
    	 $('#wheelcanvas').stopRotate();
    	 $('#wheelcanvas').rotate({
             angle:0,
             animateTo:angles+1800,
             duration:8000,
             callback:function (){
                 //中奖提示窗
            	 if(obj.commodityId==-1){
             		$(".popup_box").show();
             		that.popupMsg = "losingLottery";
             	}else{
             		$(".popup_box").show();
             		that.winingType= obj.type;
             		that.popupMsg = "windPrize";
             		that.winVal = obj.faceValue;
             		that.winName = obj.prizeName;
             	}
                 turnplate.bRotate = !turnplate.bRotate;
             }
         });
    }
    


 

function addText(text,ctx){
	//----绘制奖品开始----
	 var line_height = 17;
    ctx.fillStyle = "#E5302F";
    
    /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
   if(text.title.length>6){//奖品名称长度超过一定范围
        text = text.title.substring(0,6)+"||";
        var texts = text.split("||");
        for(var j = 0; j<texts.length; j++){
            ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
        }
    }else{
        //在画布上绘制填色的文本。文本的默认颜色是黑色
        //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
        //添加标题文字
        ctx.fillStyle="#FF3C3C";
        ctx.textBaseline = 'alphabetic';
        ctx.fillText(text.title, -ctx.measureText(text.title).width / 2, 0);
    }
}

function addImgText(text,ctx){
	   ctx.font = '16px LingYue';
	   ctx.rotate(Math.PI/180*90); //旋转90度,变成竖排
       ctx.fillStyle="#ffffff";
       ctx.globalAlpha = -0.26;
       ctx.fillText( text.faceVal,-ctx.measureText(text.faceVal).width / 2+30,5,80);
       ctx.font = '10px LingYue';
       ctx.fillStyle="#ffffff";
       ctx.fillText( "元",ctx.measureText(text.faceVal).width / 2+35,5);
       ctx.rotate(Math.PI/180*270);  //回到原来
}
function addImg(text,ctx){
	//添加对应图标
    if(text.commodityId==0){
        var img= document.getElementById("red-packet");
        img.onload=function(){
            ctx.drawImage(img,-16,20,32,40);
        };
        ctx.drawImage(img,-16,20,32,40);
    }else if(text.commodityId==-1){
        var img= document.getElementById("smiling");
        img.onload=function(){
            ctx.drawImage(img,-16,20,32,32);
        };
        ctx.drawImage(img,-16,20,32,32);
    }else{
    	var img= document.getElementById("ticket");
        img.onload=function(){
        	ctx.drawImage(img,-15,10,30,60);
        };
        ctx.drawImage(img,-15,10,30,60);
        addImgText(text,ctx)
    }

    //把当前画布返回（调整）到上一个save()状态之前
    ctx.restore();
    //----绘制奖品结束----

}

期间由于此大转盘需要文字在背景图上，解决的办法是将图片引入然后再添加文字，这样就可以解决