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

转盘图片和文字"/>

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(objmodityId==-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(textmodityId==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(textmodityId==-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();//----绘制奖品结束----}

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