本文分享jQuery rotate插件jqueryrotate制作转盘抽奖的具体代码，供大家参考。具体内容如下

原链接：js HTML5 Canvas抽转盘抽奖

下载地址：jqueryrotate

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 '/meta name=' viewport ' content=' width=设备宽度，初始比例=1,最小比例=1,最大比例=1,用户可缩放=无/title抽奖转盘/title link rel='样式表href='css/index.css' rel='外部' nofollow '脚本src=' http : js/jquery-2。1 .4 .js /脚本脚本src=' http : js/jqueryrotate。js /脚本脚本src=' http : js/index。js /脚本/头体div class=' content ' div class=' wheel ' canvas class=' item ' id=' wheel canvas '初始化样式*/body、ul、ol、li、p、h1、h2、h3、h4、h5、h6、form、fieldset、table、td、img、div { margin 3360 0；padd : 0；边框： 0；}ul，ol { list-style-type : none；}选择，输入，img，选择{垂直-对齐：中间；} a { text-decoration : nonecolor : # 000 } a : hover { color : # c00文本装饰：无；}.清除{ clear:两者；}输入{ font-size : 12px} body { color : # 333 font-size : 12px；字体系列： '微软雅黑；背景技术# e62d2d背景：绿色黄色；溢出-x:隐藏；}/* 大转盘样式*/.内容{显示：块；宽度： 95%;/*居中显示*/margin : 30px auto；}.内容。车轮{显示：块；宽度： 100%;相对位置：/*转盘的背景*/background-image: url(./图像/车轮-BG。巴布亚新几内亚)；背景尺寸： 100% 100%;}.内容车轮帆布。项目{宽度： 100%；}.内容车轮img。指针{位置：绝对；宽度： 31.5%;高： 42.5%;左： 34.3%;前：名23%；}.tips { text-align : center边距： 20px 0；颜色：红色；字体：普通24px ' MicroSoft YaHei}//判断是不是移动设备var isMobile={ AnDroid : function(){ return navigator。用户代理。匹配(/Android/I)？真：假；}，BlackBerry :函数(){ return navigator。用户代理。匹配(/黑莓/我)？真：假；}，IOs :函数(){ return navigator。用户代理。匹配(/iPhone | iPad | iPod/I)？真：假；}，windows 3360函数(){ return navigator。用户代理。匹配(/IEMobile/I)？真：假；}，any:函数(){ return(isMobile .Android() || isMobile .BlackBerry()| | isMobile。IOs()| | isMobile .windows())；}};var turn wheel={ reward names s 3360[]，//转盘奖品名称数组colors: []，//转盘奖品区块对应背景颜色outsideRadius: 192，//转盘外圆的半径textRadius: 155，//转盘奖品位置距离圆心的距离insideRadius: 68，//转盘内圆的半径startAngle: 0，//开始角度bRotate: false //false:停止；图：旋转};//图片信息var imgQb=new Image()；imgQb.src='~/./images/QB。png '；var imgSorry=new Image()；imgSorry.src='~/./images/2。png '；$(文档)。就绪（函数(){ //模拟数据，可以埃阿斯请求服务器数据，添加大转盘的奖品与奖品区域背景颜色/* $.ajax({ type: 'POST '，url: '~/./json/data.json '，data: null，async:false，dataType:'json '，//返回数据类型成功：函数（数据){ turntwheel。奖励名称=数据['奖励名称']；转动方向盘。colors=data[' colors ']；}，错误：函数（数据){ alert('网络错误，请检查您的网络设置!');$('#tip ').文本('请求数据失败');} });*/转动方向盘。奖励名称=[' 5000万流量包，' 10Q币', '谢谢参与，' 5Q币，' 10M流量包，' 20M流量包，' 10M流量包，' 20M流量包，' 20Q币，' 30M流量包，' 100米流量包2Q币' ];turnWheel.colors=[ '#FFF4D7 '，' #FFFFFF '，' #F0F4D8 '，' #FFFFFF '，' #FFF4D0 '，' #FFFFFF '，' #FFF4D0 '，' # ffffffffff '，' # ffffff4d 6 '，' # ffffffffff '，' #FFF4D6 '，' # ffffffffffffffffff ']；//旋转转盘项目：奖品序号，从0开始的；txt:提示语伯爵奖品的总数量；函数旋转数控(项目、提示、计数){ //应该旋转的角度，旋转插件角度参数是角度制。

var base angle=360/count；//旋转角度==270(当前第一个角度与指针位置之间的偏移量)-奖品位置*每个区块所占角度-每个区块所占角度的一半(指针指向区域中间)角度=360 * 3/4-(项目*基准角度)-基准角度/2；//因为一等奖从0开始，也就是$('#wheelCanvas ')。stop rotate()；//注意jqueryrotate插件传递的角度不是一个圆弧系统。//哪个标签调用方法，哪个控件$ ('# wheelcanvas ')。旋转({angle: 0，//初始旋转的角度数，立即执行Animate到3360 angle360 * 5。//还有5转，转的次数越多转的越快，持续时间： 8000。//使用animateTo callback:函数(){///Callback方法$('#tip ')指定动画执行持续时间。文字(提示)；turnWheel.bRotate=！turn wheel . brot ate；If(isMobile.any()) //确定是否移动设备{//调整OC代码window . location . href=' turn table ://test.com '？index=' item ' tip=' tip} } });};//提取按钮单击触发事件$()。指针')。点击(function(){//正在旋转，直接返回if(turnWheel.bRotate)返回；turnWheel.bRotate=！turn wheel . brot ate；var count=turn wheel . RewardNames . length；//在这里，我们要从服务器获取用户的真实中奖信息(对应中奖序号)。//简单模拟随机获取奖品序列号(在奖品数量范围内)。var item=randomNum(0，count-1)；//启动抽奖旋转功能(物品，旋转轮盘。奖励名称[项]，计数)；});});/*返回随机整数n=random=m */函数random num (n，m) {/* math。地板(数学。random()* 10)；从0到9的随机整数可以通过平衡的方式获得。*/var random=math . floor(math . random()*(m-n))n；console . log(' RewardNames[' random ']')；随机返回；}//加载页面上所有元素后，执行drawWheelCanvas()方法渲染转盘窗口。onload=function(){ draw wheel canvas()；};/* *渲染转盘* */函数draw wheel canvas(){//获取canvas画板，相当于图层？var canvas=document . getelementbyid(' wheel canvas ')；//var canvas=($('#wheelCanvas '))。get()[0]；//注意jQuery获取的是打包对象，不是DOM对象，可以转换//计算每个块占用的角度。弧系为varbase angle=math . pi * 2/(turn wheel . reward names . length)；//获取上下文var CTX=canvas . getcontext(' 2d ')；var canvasW=canvas.width//画板高度var canvasH=canvas.height//画板宽度//清空矩形CTX。给定矩形内的clearrect (0，0，canvasw，canvash );//strokeStyle绘图颜色ctx.strokeStyle=' # FFBE04//红色//字体画布上文本内容的当前字体属性ctx.font='16px微软雅黑'；//注意，起始位置是从0的角度画出的。也就是水平向右。

//画具体内容用于(var索引=0;索引转轮。重新命名。长度；索引){ //当前的角度可变角度=转动车轮。起始角度指数*基础角度；//填充颜色CTX。FillStyle=转动方向盘。颜色[索引]；//开始画内容//- 基本的背景颜色CTX。begin path()；/* * 画圆弧，和IOS的Quartz2D类似* context.arc(x，y，r，桑乐，eAngle，逆时针);* x :圆的中心点x * y :圆的中心点x *桑乐，编号：起始角度、结束角度*逆时针： 绘制方向，可选，False=顺时针，真=逆时针* */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。笔画()；CTX。fill()；//保存画布的状态，和图形上下文栈类似，后面可以恢复还原状态（坐标还原为当前的0，0)，CTX。save()；/* - 绘制奖品内容-重点- *///红色字体CTX。FillStyle=' # e 5302 fvar奖励名称=转轮。奖励名称[索引]；var line _ height=17//翻译方法重新映射画布上的(0,0) 位置//context.translate(x，y)；//见演示文档图片，var translateX=canvasW * 0.5数学。cos(角度底角/2)*转动车轮。文本半径；var translateY=canvasH * 0.5数学。罪恶(基于角度的角度/2)*转动方向盘。文本半径；ctx.translate(translateX，translateY)；//旋转方法旋转当前的绘图，因为文字适合当前扇形中心线垂直的！//角度，当前扇形自身旋转的角度baseAngle/2中心线多旋转的角度垂直的角度90度旋转（基于角度/2数学/2)；/** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变)**///画布的测量文本()方法返回包含一个对象，该对象包含以像素计的指定字体宽度//fillText()方法在画布上绘制填色的文本。文本的默认颜色是黑色fillStyle .属性以另一种颜色/渐变来渲染文本/* * context.fillText(text，x，y，MaxWidth)；* 注意！y是文字的最底部的值，并不是顶端的值！* */if(奖励名称。索引为(' M ')0){//查询是否包含字段流量包var奖励名称=奖励名称。拆分(' M ')；for(var j=0；j RewardNames . length j){ CTX . font=(j==0)？粗体20px微软雅黑： '16px微软雅黑；if(j==0){ CTX。(奖励名字[j]‘M’，-CTX。测量文本(奖励名称[j]' M ').宽度/2，j * line _ height)；} else { CTX。CTX。测量文本(重新命名[j]).宽度/2，j * line _ height)；} } } else if(奖励名称。的索引(' M ')==-1奖励名称。长度6){//奖品名称长度超过一定范围奖励名称=奖励名称。子字符串(0，6)' | | '奖励名称。子串(6)；var RewardNames=RewardName。拆分(' | | ')；for(var j=0；ctx。测量文本(重新命名[j]).宽度/2，j * line _ height)；} } else { //在画布上绘制填色的文本。文本的默认颜色是黑色ctx.fillText(rewardName)，-ctx.measureText(rewardName).宽度/2,0);} //添加对应图标if(rewardName.indexOf('Q币') 0) { //注意，这里要等到img加载完成才能绘制imgQb。onload=function(){ CTX。绘制图像(imgQb，-15，10)；};ctx.drawImage(imgQb，-15，10)；} else if(rewardName.indexOf('谢谢参与)=0){ img抱歉。onload=function(){ CTX。绘制图像(img对不起，-15，10)；};ctx.drawImage(imgSorry，-15，10)；} //还原画板的状态到上一个保存()状态之前CTX。restore()；/* - 绘制奖品结束- */}}如果用到ajax，date.json文件：

{'rewardNames':[ '50M流量包'，' 10Q硬币'，'感谢参与'，' 5Q硬币'，' 10M流量包'，' 20M流量包'，' 20Q硬币'，' 30M流量包'，' 100M颜色' 3360 ['# fff4d7 '，' # ffffffff '，' # f0f4d8 '，' # ffffff '，' # fff4d0 '，' # ffffffffff '，' # fff4d0 '，' '