标签：
网上的例子大部分需要做图，太麻烦不合适。
所以使用【html5 canvas】实现，参考网上例子修改衍变出来的。
笔者是做WEB后端，更多是后端思维写代码，前端代码写得一般，请各位看客海涵。
模块化：自定义修改非常方便
参数化：配置简单，调用方便
封闭化：参数封闭，不影响全局
rotor.js
/** * objMain：div对象ID * award：奖品列表 * number：抽奖次数 * rLen：圆半径 */ function rotor(objMain, award, number, rLen) { //容器对象 objMain = document.getElementById(objMain); //创建标签========== var tag; for (var i = 0; i < 5; i++) { tag = document.createElement("canvas"); objMain.appendChild(tag); } tag = document.createElement("button"); objMain.appendChild(tag); //系统参数，不可更改========== var awardLen = award.length;//奖品数量 var runTime = 0;//已抽奖次数 var cvTag = objMain.getElementsByTagName(‘canvas‘);//canvas对象 var btn = objMain.getElementsByTagName(‘button‘)[0];//按钮对象 //标签集合========== var objTag = new Array(); var objTD = new Array(); //外圆 objTag[‘wy‘] = cvTag[0]; objTD[‘wy‘] = objTag[‘wy‘].getContext(‘2d‘); //中圆 objTag[‘zy‘] = cvTag[1]; objTD[‘zy‘] = objTag[‘zy‘].getContext(‘2d‘); //小圆 objTag[‘xy‘] = cvTag[2]; objTD[‘xy‘] = objTag[‘xy‘].getContext(‘2d‘); //按钮文字 objTag[‘an‘] = cvTag[3]; objTD[‘an‘] = objTag[‘an‘].getContext(‘2d‘); //指针 objTag[‘zz‘] = cvTag[4]; objTD[‘zz‘] = objTag[‘zz‘].getContext(‘2d‘); /** * ========== * 函数 * ========== */ //样式 function css() { objTag[‘wy‘].setAttribute("width", rLen * 2); objTag[‘wy‘].setAttribute("height", rLen * 2); objTag[‘zy‘].setAttribute("width", rLen); objTag[‘zy‘].setAttribute("height", rLen); objTag[‘zy‘].style.cssText += "top: " + rLen / 2 + "px; left: " + rLen / 2 + "px; position: absolute;"; objTag[‘xy‘].setAttribute("width", rLen / 2); objTag[‘xy‘].setAttribute("height", rLen / 2); objTag[‘an‘].setAttribute("width", rLen / 2); objTag[‘an‘].setAttribute("height", rLen / 2); objTag[‘zz‘].setAttribute("width", rLen / 4); objTag[‘zz‘].setAttribute("height", rLen / 4); objTag[‘zz‘].style.cssText += "top: " + rLen / 2 + "px; left: " + (rLen - rLen / 8) + "px; position: absolute;"; btn.style.cssText += "width: " + rLen / 2 + "px; height: " + rLen / 2 + "px; cursor: pointer; border-radius: 100%; background: transparent; border: none; outline: none;"; var cssCom = "top: " + (rLen / 4 * 3) + "px; left: " + (rLen / 4 * 3) + "px; position: absolute;"; objTag[‘xy‘].style.cssText += cssCom; objTag[‘an‘].style.cssText += cssCom; btn.style.cssText += cssCom; } //绘制转盘 function draw() { //外圆 var startAngle = 0;//扇形的开始弧度 var endAngle = 0;//扇形的终止弧度 var avgAngle = Math.PI * 2 / awardLen;//每份弧度 for (var i = 0; i < awardLen; i++) { //扇形 startAngle = avgAngle * i; endAngle = startAngle + avgAngle; objTD[‘wy‘].beginPath(); objTD[‘wy‘].arc(rLen, rLen, rLen / 2, startAngle, endAngle); objTD[‘wy‘].lineWidth = rLen; objTD[‘wy‘].strokeStyle = randColor(i);//颜色 objTD[‘wy‘].stroke(); objTD[‘wy‘].closePath(); //奖项 objTD[‘wy‘].save(); objTD[‘wy‘].beginPath(); objTD[‘wy‘].translate(rLen, rLen); objTD[‘wy‘].rotate(avgAngle * i + avgAngle / 2); objTD[‘wy‘].font = rLen / 10 + "px Microsoft YaHei"; objTD[‘wy‘].textAlign = ‘start‘; objTD[‘wy‘].textBaseline = ‘middle‘; objTD[‘wy‘].fillStyle = ‘#DCC722‘; objTD[‘wy‘].fillText(award[i], rLen / 3 * 2, 0); objTD[‘wy‘].fill(); objTD[‘wy‘].closePath(); objTD[‘wy‘].restore(); } //生成颜色 function randColor(no) { //return ‘#‘ + (‘00000‘ + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6); if (no % 2 == 0) { return "#626262"; } else { return "#787878"; } }; //中圆 objTD[‘zy‘].beginPath(); objTD[‘zy‘].arc(rLen / 2, rLen / 2, rLen / 2, 0, Math.PI * 2); objTD[‘zy‘].fillStyle = "rgba(0,0,0,0.5)";//颜色 objTD[‘zy‘].fill(); objTD[‘zy‘].closePath(); //小圆 objTD[‘xy‘].beginPath(); objTD[‘xy‘].arc(rLen / 4, rLen / 4, rLen / 4, 0, Math.PI * 2); objTD[‘xy‘].fillStyle = "#FF4350";//颜色 objTD[‘xy‘].fill(); objTD[‘xy‘].closePath(); //按钮文字 objTD[‘an‘].beginPath(); objTD[‘an‘].font = "Bold " + rLen / 8 + "px Microsoft YaHei"; objTD[‘an‘].textAlign = ‘center‘; objTD[‘an‘].textBaseline = ‘middle‘; objTD[‘an‘].fillStyle = ‘white‘; objTD[‘an‘].fillText(‘开始‘, rLen / 4, rLen / 4); objTD[‘an‘].fill(); objTD[‘an‘].closePath(); //指针 objTD[‘zz‘].beginPath(); objTD[‘zz‘].moveTo(rLen / 8, 0); objTD[‘zz‘].lineTo(rLen / 16, rLen / 4); objTD[‘zz‘].lineTo(rLen / 16 + rLen / 8, rLen / 4); objTD[‘zz‘].lineTo(rLen / 8, 0); objTD[‘zz‘].fillStyle = "#FF4350";//颜色 objTD[‘zz‘].fill(); objTD[‘zz‘].closePath(); } //抽奖 function run() { //禁止按钮 btn.disabled = ‘true‘; //获取随机数 function randNum(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }; var rand = randNum(0, awardLen - 1); //动画========== var transTime = ‘6‘;//抽奖旋转时间(秒) //计算角度 var rounds = 6;//每次旋转圈数，越大越快 var avgAngle = 360 / awardLen; var degValue = 360 * rounds * runTime - 360 / 4 - avgAngle * rand - avgAngle / 2; degValue = ‘rotate(‘ + degValue + ‘deg)‘; //旋转 var obj = objTag[‘wy‘]; obj.style.cssText += "-moz-transition: transform " + transTime + "s; -webkit-transition: transform " + transTime + "s; -o-transition: transform " + transTime + "s; transition: transform " + transTime + "s;"; obj.style.cssText += "-ms-transform:" + degValue + "; -moz-transform:" + degValue + "; -webkit-transform:" + degValue + "; -o-transform:" + degValue + ";transform:" + degValue + ";"; //抽奖结束========== setTimeout(function () { //提示 alert(award[rand]); //开启按钮 btn.disabled = ‘‘; }, transTime * 1000); } /** * ========== * 执行 * ========== */ css(); draw(); btn.onclick = function () { if (number > 0) { number--; runTime++; run(); } else { alert("抽奖次数已用完！"); } } }
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>抽奖系统</title> <style> #roll { width: 400px; height: 400px; margin: 100px auto; position: relative; } </style> </head> <body> <div id="roll"></div> </body> </html> <script src="js/rotor.js"></script> <script> //默认选项 var list = [ "a1", "b2", "c3", "d4" ]; rotor(‘roll‘, list, 10, 200); </script>
标签：
原文地址：http://www.cnblogs.com/xiejixing/p/5800353.html
