这是一款基于jquery和html5 canvas的幸运大奖盘特效。该幸运大奖品特效支持移动端，它通过动态构造canvas元素来生成大奖盘，并通过jquery代码来随机获取奖品。
使用方法
html结构
抽奖用的大转盘使用图片来制作，开始时它们被隐藏。整个抽奖大奖盘放置在一个容器中，控制容器的大小即可以控制奖盘的大小。
<div class="container"> <img src="images/1.png" id="shan-img" style="display:none;" /> <img src="images/2.png" id="sorry-img" style="display:none;" /> <div class="banner"> <div class="turnplate" style="background-image:url(images/turnplate-bg.png);background-size:100% 100%;"> <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas> <img class="pointer" src="images/turnplate-pointer.png"/> </div> </div> </div>
css样式
为大奖盘添加下面的css样式：
.banner{display:block;width:95%;margin-left:auto;margin-right:auto;margin-bottom: 20px;} .banner .turnplate{display:block;width:100%;position:relative;} .banner .turnplate canvas.item{width:100%;} .banner .turnplate img.pointer{position:absolute;width:31.5%;height:42.5%;left:34.6%;top:23%;}
javascript
整个大奖盘的jquery实现代码如下：
var turnplate={ restaraunts:[], //大转盘奖品名称 colors:[], //大转盘奖品区块对应背景颜色 outsideradius:192, //大转盘外圆的半径 textradius:155, //大转盘奖品位置距离圆心的距离 insideradius:68, //大转盘内圆的半径 startangle:0, //开始角度 brotate:false //false:停止;ture:旋转 }; $(document).ready(function(){ //动态添加大转盘的奖品与奖品区域背景颜色 turnplate.restaraunts = ["50m免费流量包", "10金币", "谢谢参与", "5金币", "10m免费流量包", "20m免费流量包", "20金币 ", "30m免费流量包", "100m免费流量包", "2金币"]; turnplate.colors = ["#fff4d6", "#ffffff", "#fff4d6", "#ffffff","#fff4d6", "#ffffff", "#fff4d6", "#ffffff","#fff4d6", "#ffffff"]; var rotatetimeout = function (){ $('#wheelcanvas').rotate({ angle:0, animateto:2160, duration:8000, callback:function (){ alert('网络超时，请检查您的网络设置！'); } }); }; //旋转转盘 item:奖品位置; txt：提示语; var rotatefn = function (item, txt){ 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 (){ alert(txt); turnplate.brotate = !turnplate.brotate; } }); }; $('.pointer').click(function (){ if(turnplate.brotate)return; turnplate.brotate = !turnplate.brotate; //获取随机数(奖品个数范围内) var item = rnd(1,turnplate.restaraunts.length); //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288] rotatefn(item, turnplate.restaraunts[item-1]); }); }); function rnd(n, m){ var random = math.floor(math.random()*(m-n+1)+n); return random; } //页面所有元素加载完毕后执行drawroulettewheel()方法对转盘进行渲染 window.onload=function(){ drawroulettewheel(); }; 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 = '16px microsoft yahei'; for(var i = 0; i < turnplate.restaraunts.length; i++) { var angle = turnplate.startangle + i * arc; ctx.fillstyle = turnplate.colors[i]; ctx.beginpath(); //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆） ctx.arc(211, 211, turnplate.outsideradius, angle, angle + arc, false); ctx.arc(211, 211, turnplate.insideradius, angle + arc, angle, true); ctx.stroke(); ctx.fill(); //锁画布(为了保存之前的画布状态) ctx.save(); //----绘制奖品开始---- ctx.fillstyle = "#e5302f"; var text = turnplate.restaraunts[i]; var line_height = 17; //translate方法重新映射画布上的 (0,0) 位置 ctx.translate(211 + math.cos(angle + arc / 2) * turnplate.textradius, 211 + math.sin(angle + arc / 2) * turnplate.textradius); //rotate方法旋转当前的绘图 ctx.rotate(angle + arc / 2 + math.pi / 2); /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/ if(text.indexof("m")>0){//流量包 var texts = text.split("m"); for(var j = 0; j<texts.length; j++){ ctx.font = j == 0?'bold 20px microsoft yahei':'16px microsoft yahei'; if(j == 0){ ctx.filltext(texts[j]+"m", -ctx.measuretext(texts[j]+"m").width / 2, j * line_height); }else{ ctx.filltext(texts[j], -ctx.measuretext(texts[j]).width / 2, j * line_height); } } }else if(text.indexof("m") == -1 && text.length>6){//奖品名称长度超过一定范围 text = text.substring(0,6)+"||"+text.substring(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.filltext(text, -ctx.measuretext(text).width / 2, 0); } //添加对应图标 if(text.indexof("金币")>0){ var img= document.getelementbyid("shan-img"); img.onload=function(){ ctx.drawimage(img,-15,10); }; ctx.drawimage(img,-15,10); }else if(text.indexof("谢谢参与")>=0){ var img= document.getelementbyid("sorry-img"); img.onload=function(){ ctx.drawimage(img,-15,10); }; ctx.drawimage(img,-15,10); } //把当前画布返回（调整）到上一个save()状态之前 ctx.restore(); //----绘制奖品结束---- } } }
以上就是html5 canvas移动手机端的幸运大奖盘特效的内容。