本文实例讲述了js抽奖转盘实现方法。分享给大家供大家参考，具体如下：

HTML 这里.left 固定了圆的宽度和高度，还有canvas也设置了固定宽高 绘制圆心的坐标也就出来了 (203,203)

抽奖转盘是由一个大圆和一个内圆完成 ；大圆负责绘制上奖品 ，内圆负责确定指针的位置，指针直接使用图片，决定位置确定

<div class="left"><div class="turnplate" style="background:#1bacff;border-radius: 50%"><canvas class="item" id="wheelcanvas" width="406px" height="406px"></canvas><img class="pointer" src="sp2/point.png"/></div></div>

外圆留空多少的问题

PS里查看间距是多少，此处圆心(203,203) 大圆的半径就是203-10 =193

这个数值在下图里设置

JS

<script type="text/javascript"> var turnplate={ restaraunts:[], //大转盘奖品名称 colors:[], //大转盘奖品区块对应背景颜色 outsideRadius:193, //大转盘外圆的半径 192 textRadius:155, //大转盘奖品位置距离圆心的距离 insideRadius:68, //大转盘内圆的半径 startAngle:0, //开始角度 bRotate:false //false:停止;ture:旋转 }; $(document).ready(function(){ //动态添加大转盘的奖品与奖品区域背景颜色 turnplate.restaraunts = ["50元代金券", "升职加薪", "100元代金券", "财源滚滚", "200元代金券", "爱情甜蜜 ", "500元代金券", "变美变帅"]; turnplate.colors = ["#1b62ca", "#1bacff", "#1b62ca", "#1bacff","#1b62ca", "#1bacff", "#1b62ca", "#1bacff"]; 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]); console.log(item); }); }); 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);//圆周率/ 奖品数量除以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(203, 203, turnplate.outsideRadius, angle, angle + arc, false);//绘制外圆 ctx.arc(203, 203, turnplate.insideRadius, angle + arc, angle, true);//绘制内圆 ctx.stroke(); ctx.fill(); //锁画布(为了保存之前的画布状态) ctx.save(); //----绘制奖品开始---- ctx.fillStyle = "#FFF"; 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(); //----绘制奖品结束---- } } } </script>

引用jquery

在加载以下JS

/* ????????????? :vml" class="rvml">'); }; }})();}})(jQuery);

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。