javascript HTML5 Canvas抽转盘抽奖

之前的项目中，有些需要抽奖转盘功能。项目已经完成一段时间了，没有严重的bug，现在就和大家分享一下。

功能1。转盘要美观，旋转效果要流畅。2.奖品图片需要显示在转盘上，奖品是背景中读出的照片和名字。3.旋转动画完成后，应该会有相应的提示。4.有奖具体算法在数据库中操作，前端只提供最终效果展示。

知识要点1。参考一个jq插件：awardRotate，用来实现更智能的旋转(插件下载：http://www . jqcool . net/jquery-jqueryrotate . html)。2.使用canvas标签和相应的html5 api进行操作。(画布中文手册可以查看http://javascript.ruanyifeng.com/htmlapi/canvas.html.

文字指大转盘风格。lunck _ draw _ wrap { display : block；宽度：95%；右边距： auto；} .lunck_draw_wrap。转盘{ display:block宽度：106%；位置：相对；} .lunck_draw_wrap。转盘画布. { left:1px相对位置：top:9px宽度：100%；} .lunck_draw_wrap。转盘img . pointer { height :37.5%；左：34.6%；绝对位置：top:30宽度：31.5%；}转盘插件所需的参数：

Var翻板={餐厅s: []，//大转盘奖品名称lucky 3360 []，//奖品内容color :[]，//大转盘奖品块对应背景色商品imgar3360 []，//奖品图片页面标签outsideRadius:175，//大转盘外圆半径为textRadius:140，//大转盘奖品位置到圆心距离为insideRadius:65，///半径Ture:旋转}；根据参数，我们需要从服务器获取对应的奖品名称、奖品内容、奖品图片页面标签等信息，然后渲染大转盘。因此，我们的第一步是向服务器发送请求以获取相应的奖品信息，并遍历生成大转盘所需的数组参数：

$.每一个(data.list，function(key，value){ tower late . restaurants . push(value . data0)；tower late . lucky . push(value . data 1)；goverlate . goodimgarr . push(getLuckyImg value . data 4)；if(key %2==0)转盘. colors . push(' # fff ')；else转盘. colors . push(' 5 fcbd 4 ')；})数据. list是我得到的奖品json数据：

[{'data0': '一等奖'，' data1' :' iphone6s '，' data2' :' 0 '，' data3' :' 0 '，' data4' :' 20151016140630384。数据6':' XXXXX，浙江省衢州市柯城区'，'数据7' :' 0570-XXXXXX'}，]由于客户要求奖品不是“感谢参与”，最低奖品也是“中奖”，所以遍历奖品后，插入“中奖”的渲染描述：

转盘. goodsimgar.push('./images/hongbao.png ')收费公路.餐厅. push('中奖')；转盘. colors . push(' # 5 fcbd 4 ')；//加载完页面上的所有元素后，执行drawRouletteWheel()方法渲染转盘。预载图像(转盘. good imgar)。done(function(images){ drawrouletewheel()；});因为加载图片需要时间，用canvas复制图片需要先加载图片才能绘制，所以在加载完所有奖品图片后，我用preloadimages来渲染大转盘：

//preload函数preload images(arr){ var new images=[]，loaded images=0 var post action=function(){ }//a post action function var arr=(typeof arr！='object ')？[arr] :arr函数imageloadpost(){ loaded images if(loaded images==arr . length){ postaction(newimages)//当加载完成时，我们调用post action函数，并将new images数组作为参数传入} } for(var I=0；一、长度；I){ new images[I]=new image()new images[I]。src=arr[i] newimages[i]。onload=function(){ imageloadpost()} new images[I]。onerror=function(){ imageloadpost()} } return {//这里返回一个空白对象的done方法done 3360 function(f){ post action=f | | post action } }来绘制转盘代码：

函数drawinrouleteewheel(){ var canvas=document。getelementbyid('车轮画布')；if(canvas.getContext){ //根据奖品个数计算圆周角度var弧=数学PI /(转盘。餐馆。长度/2)；var CTX=画布。get context(' 2d ')；//在给定矩形内清空一个矩形ctx.clearRect(0，0，422，422)；//strokeStyle属性设置或返回用于笔触的颜色、渐变或模式ctx.strokeStyle='rgba(0，0，0，0)'；//字体属性设置或返回画布上文本内容的当前字体属性ctx.font='bold 18px微软雅黑；for(var I=0；我收费。餐馆。长度；i ){ //根据当前奖品索引计算绘制的扇形开始弧度变化角度=转盘。开始角度i *圆弧；//根据奖品参数绘制扇形填充颜色ctx.fillStyle=转盘。颜色[I]；//开始绘制扇形CTX。begin path()；//arc(x，y，r，起始角，结束角，绘制方向)方法创建弧/曲线（用于创建圆或部分圆) //绘制大圆ctx.arc(212，212，转盘。外直径，角度，角弧，假)；//绘制小圆ctx.arc(212，212，转盘。insideRadius，角度弧，角度，真);CTX。笔画()；CTX。fill()；//锁画布（为了保存之前的画布状态)CTX。save()；//- 绘制奖品开始- //奖品默认字体颜色ctx.fillStyle=' # fffvar text=转盘。餐馆[我]；var lukyname=转盘。幸运[我]；var line _ height=17//翻译方法重新映射画布上的(0,0) 位置ctx.translate(212 Math.cos(角弧/2)*转盘。textRadius，212 Math.sin(角弧/2)*转盘。文本半径)；//旋转方法旋转当前的绘图ctx.rotate(角度弧/2数学.PI/2)；//绘制奖品图片var img=NewIMage()；img.src=转盘。goodsimgarr[I]；ctx.drawImage(img，-17，35)；//由于设计的转盘色块是交错的，所以这样可以实现相邻奖品区域字体颜色不同if(I % 2==0){ CTX。FillStyle=' # f 7452 f} //将字体绘制在对应坐标ctx.fillText(文本)，-ctx.measureText(文本)。宽度/2,0);//设置字体ctx.font=' 14px微软雅黑；//绘制奖品名称if(text！='优胜奖){ CTX。CTX。测量文本(luk名称).宽度/2,25);}else{ ctx.fillText('优麦币，-ctx.measureText('优麦币').宽度/2,25);} //把当前画布返回（插入)到上一个保存()状态之前CTX。restore()；CTX。save()；//- 绘制奖品结束- } } }每一步基本上都有注释，对于帆布方法有不理解的可以百度，或者查询我上面分享的中文手册html。代码为：

' div class=' lunck _ draw _ wrap ' div class='收费公路风格=' background-size:1000%；canvas class=' item ' id=' wheel canvas ' width=' 422 px ' height=' 422 px '/canvas img class=' pointer ' style=' top :0 px；左侧：0像素宽度：100%;高度：100%;src='http:/images/张丑12。png '/img类='指针' src=' http :/images/hianji .png '/div/div效果图：

点击事件执行代码：

$('.lunck _ draw _ wrap’).委托(' img.pointer '，' click '，function(){ if(转盘。兄弟)返回收费公路兄弟=！转盘。$.getJSON('./AJAX/彩票。ashx '，'，函数（数据){ //1090系统配置错误，1091用户未登陆或用户数据异常，1092用户剩余积分不足，1093未中奖隐藏输入('代码'，数据。代码)if(数据。代码。tostring()==' 1090 '){ IOs alert('系统配置错误)} else if(数据。代码。tostring()==' 1091 '){ IOs alert('用户未登陆或用户数据异常)} else if(数据。代码。tostring()==' 1092 '){ IOs alert('用户剩余积分不足)} else if(数据。代码。tostring()==' 1094 '){ IOs alert('超过每日抽奖次数)} else { var uppoint=0；uppoint=parseInt($(' # uppoint ').html())- parseInt($('#sPoint ').html())；$(' # uppoint ').html(uppoint)；if(数据。iswin==' true '){ item=Getarrayindex(转盘。餐馆，数据。姓名)；旋转（项目1 '恭喜获得，'收费的。餐厅[项目])；} else{ rotateFn(0)，恭喜获得优胜奖!');} } }) });上面的代码实现了基本上的逻辑，还需要一个转动转盘的方法来响应服务端传过来的结果：

//旋转转盘项目：奖励位置；Txt:提示；Varrotate fn=function (item，txt){//根据来奖序号计算对应弧度。varangles=item *(360/收费公路.餐厅.长度)-(360/(收费公路.餐厅.长度* 2))；if(角度270){ angles=270-angles；} else { angles=360-angles 270；}//strong制停止转盘的旋转$('#wheelcanvas ')。stop rotate()；//调用rotation方法，设置旋转所需的参数和回调函数$('#wheelcanvas ')。旋转({ //起始角度角度：0，//旋转角度1800是为了多转几圈动画到3360角度1800，持续时间33608000，回调3360函数(){IOS成功。收费公路。bRotate=！转盘。if($('#code ')。val()！=' 1093 '){ DelayLoad(GetHttppRefX ' graphicdetails . html？lukyid=' $('#code ')。val())} })；};好了，主要的功能代码已经分享了，还有一些工具和方法不太懂，可以留言我来补充。综上所述canvas是html5强大的王牌，可以达到很多华丽的效果。希望这篇文章可以帮助一些正在学习使用画布的朋友。