jquery.rotate插件实现抽奖转盘效果

直接修改里面的奖品设置就可以换成你自己的奖品设置了,非常方便~
var turnWheel = {
   	    outsideRadius:192,			//转盘外圆的半径
   	    textRadius:155,				//转盘奖品位置距离圆心的距离
   	    insideRadius:68,			//转盘内圆的半径
   	    startAngle:0,				//开始角度
   	    bRotate:false				//false:停止;ture:旋转
   	};
   	var prizes = [
   		{id:"00", idx:0, name:"谢谢参与",fullname:"谢谢参与", color:"#ffff00", fontcolor:"#000000", img:"00.png", imgObj: new Image()},
   		{id:"01", idx:1, name:"仟圆礼包",fullname:"1000元大礼包", color:"#6600ff", fontcolor:"#FFFFFF", img:"01.png", imgObj: new Image()},
   		{id:"02", idx:2, name:"象八音盒", fullname:"木质小象八音盒",color:"#ff0000", fontcolor:"#000000", img:"02.png", imgObj: new Image()},
   		{id:"03", idx:3, name:"仟圆油卡", fullname:"1000元中石化加油卡",color:"#33cc00", fontcolor:"#FFFFFF", img:"03.png", imgObj: new Image()},
   		{id:"04", idx:4, name:"玖圆红包", fullname:"9元现金红包",color:"#b90fbd", fontcolor:"#FFFFFF", img:"04.png", imgObj: new Image()},
   		{id:"05", idx:5, name:"iPhone6S", fullname:"苹果6s一部",color:"#ffff00", fontcolor:"#000000", img:"05.png", imgObj: new Image()},
   		{id:"06", idx:6, name:"玖拾玖", fullname:"99元现金红包",color:"#6600ff", fontcolor:"#FFFFFF", img:"06.png", imgObj: new Image()},
   		{id:"07", idx:7, name:"吉星吊坠", fullname:"吉星高照黄金吊坠",color:"#ff0000", fontcolor:"#000000", img:"07.png", imgObj: new Image()},
   		{id:"08", idx:8, name:"199红包", fullname:"199元现金红包",color:"#33cc00", fontcolor:"#FFFFFF", img:"08.png", imgObj: new Image()},
   		{id:"09", idx:9, name:"迪士尼",fullname:"迪士尼门票一张",color:"#b90fbd", fontcolor:"#FFFFFF", img:"09.png",imgObj: new Image()},
   	];
   	var prizeMap = {};
   	for(var i=0,l=prizes.length;i";
					}
					$("#tip").html(_html).show();
   	            }
   	        });
   	    };

   	    $('.pointer').click(function (){
   	        if(turnWheel.bRotate) return;
   			turnWheel.bRotate = !turnWheel.bRotate;
   			rotateFunc(prizeMap["05"]["idx"]);
   	    });

   	});

   	window.onload=function(){
   	    drawWheelCanvas();
   	};

   	function drawWheelCanvas(){
   	    var canvas = document.getElementById("wheelCanvas");
   	    var baseAngle = Math.PI * 2 / (prizes.length);
   	    var ctx=canvas.getContext("2d");
   	    var canvasW = canvas.width;
   	    var canvasH = canvas.height;
   	    ctx.clearRect(0,0,canvasW,canvasH);
   	    ctx.strokeStyle = "#FFFFFF";
   	    ctx.font = '16px Microsoft YaHei';
   		for(var index = 0 ; index < prizes.length ; index++){
   	        var angle = turnWheel.startAngle + index * baseAngle;
   	        ctx.fillStyle = prizes[index].color;

   	        ctx.beginPath();
   	        ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.outsideRadius, angle, angle + baseAngle, false);
   	        ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.insideRadius, angle + baseAngle, angle, true);
   	        ctx.stroke();
   	        ctx.fill();
   	        ctx.save();
   			
   	        
   	        ctx.fillStyle = prizes[index].fontcolor;
   	        var rewardName = prizes[index].name;
   	        var line_height = 10;
   	        var translateX =  canvasW * 0.5 + Math.cos(angle + baseAngle / 2) * turnWheel.textRadius;
   	        var translateY =  canvasH * 0.5 + Math.sin(angle + baseAngle / 2) * turnWheel.textRadius;
   	        ctx.translate(translateX,translateY);
   	        ctx.rotate(angle + baseAngle / 2 + Math.PI / 2);
   			ctx.fillText(rewardName, -ctx.measureText(rewardName).width / 2, 0);
   			var img = prizes[index].imgObj;
   	        img.onload=function(){
   				ctx.drawImage(img,-15,10);
   			};
   			ctx.drawImage(img,-15,10);
   	        ctx.restore();
   	    }
   	}