http://www.jq22.com/jquery-info17668 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>大转盘中午吃啥</title> <style type="text/css"> body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0}body{color:#333;font-size:12px;font-family:microsoft yahei}ul,ol{list-style-type:none}select,input,img,select{vertical-align:middle}input{font-size:12px}a{text-decoration:none;color:#000}a:hover{color:#c00;text-decoration:none}.clear{clear:both}.banner{display:block;width:65%;margin-left:auto;margin-right:auto;margin-bottom:20px}.banner .turnplate{display:block;width:60%;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%} .body{color: #fff;background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;overflow-x:hidden; -webkit-animation: Gradient 15s ease infinite; -moz-animation: Gradient 15s ease infinite; animation: Gradient 15s ease infinite;} @keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } </style> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <!--<script type="text/javascript" src="http://www.jq22.com/demo/jqueryTurnplate201801032323/js/awardRotate.js"></script>--> <script type="text/javascript"> !function($){for(var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" "),a=0;a<toCheck.length;a++)void 0!==styles[toCheck[a]]&&(supportedCSS=toCheck[a]) var IE=eval('"v"=="\x0B"') jQuery.fn.extend({rotate:function(t){if(0!==this.length&&void 0!==t){"number"==typeof t&&(t={angle:t}) for(var i=[],e=0,s=this.length;s>e;e++){var h=this.get(e) if(h.Wilq32&&h.Wilq32.PhotoEffect)h.Wilq32.PhotoEffect._handleRotation(t) else{var a=$.extend(!0,{},t),n=new Wilq32.PhotoEffect(h,a)._rootObj i.push($(n))}}return i}},getRotateAngle:function(){for(var t=[],i=0,e=this.length;e>i;i++){var s=this.get(i) s.Wilq32&&s.Wilq32.PhotoEffect&&(t[i]=s.Wilq32.PhotoEffect._angle)}return t},stopRotate:function(){for(var t=0,i=this.length;i>t;t++){var e=this.get(t) e.Wilq32&&e.Wilq32.PhotoEffect&&clearTimeout(e.Wilq32.PhotoEffect._timer)}}}),Wilq32=window.Wilq32||{},Wilq32.PhotoEffect=function(){return supportedCSS?function(t,i){t.Wilq32={PhotoEffect:this},this._img=this._rootObj=this._eventObj=t,this._handleRotation(i)}:function(t,i){if(this._img=t,this._rootObj=document.createElement("span"),this._rootObj.style.display="inline-block",this._rootObj.Wilq32={PhotoEffect:this},t.parentNode.insertBefore(this._rootObj,t),t.complete)this._Loader(i) else{var e=this jQuery(this._img).bind("load",function(){e._Loader(i)})}}}(),Wilq32.PhotoEffect.prototype={_setupParameters:function(t){this._parameters=this._parameters||{},"number"!=typeof this._angle&&(this._angle=0),"number"==typeof t.angle&&(this._angle=t.angle),this._parameters.animateTo="number"==typeof t.animateTo?t.animateTo:this._angle,this._parameters.step=t.step||this._parameters.step||null,this._parameters.easing=t.easing||this._parameters.easing||function(t,i,e,s,h){return-s*((i=i/h-1)*i*i*i-1)+e},this._parameters.duration=t.duration||this._parameters.duration||1e3,this._parameters.callback=t.callback||this._parameters.callback||function(){},t.bind&&t.bind!=this._parameters.bind&&this._BindEvents(t.bind)},_handleRotation:function(t){this._setupParameters(t),this._angle==this._parameters.animateTo?this._rotate(this._angle):this._animateStart()},_BindEvents:function(t){if(t&&this._eventObj){if(this._parameters.bind){var i=this._parameters.bind for(var e in i)i.hasOwnProperty(e)&&jQuery(this._eventObj).unbind(e,i[e])}this._parameters.bind=t for(var e in t)t.hasOwnProperty(e)&&jQuery(this._eventObj).bind(e,t[e])}},_Loader:function(){return IE?function(t){var i=this._img.width,e=this._img.height this._img.parentNode.removeChild(this._img),this._vimage=this.createVMLNode("image"),this._vimage.src=this._img.src,this._vimage.style.height=e+"px",this._vimage.style.width=i+"px",this._vimage.style.position="absolute",this._vimage.style.top="0px",this._vimage.style.left="0px",this._container=this.createVMLNode("group"),this._container.style.width=i,this._container.style.height=e,this._container.style.position="absolute",this._container.setAttribute("coordsize",i-1+","+(e-1)),this._container.appendChild(this._vimage),this._rootObj.appendChild(this._container),this._rootObj.style.position="relative",this._rootObj.style.width=i+"px",this._rootObj.style.height=e+"px",this._rootObj.setAttribute("id",this._img.getAttribute("id")),this._rootObj.className=this._img.className,this._eventObj=this._rootObj,this._handleRotation(t)}:function(t){this._rootObj.setAttribute("id",this._img.getAttribute("id")),this._rootObj.className=this._img.className,this._width=this._img.width,this._height=this._img.height,this._widthHalf=this._width/2,this._heightHalf=this._height/2 var i=Math.sqrt(this._height*this._height+this._width*this._width) this._widthAdd=i-this._width,this._heightAdd=i-this._height,this._widthAddHalf=this._widthAdd/2,this._heightAddHalf=this._heightAdd/2,this._img.parentNode.removeChild(this._img),this._aspectW=(parseInt(this._img.style.width,10)||this._width)/this._img.width,this._aspectH=(parseInt(this._img.style.height,10)||this._height)/this._img.height,this._canvas=document.createElement("canvas"),this._canvas.setAttribute("width",this._width),this._canvas.style.position="relative",this._canvas.style.left=-this._widthAddHalf+"px",this._canvas.style.top=-this._heightAddHalf+"px",this._canvas.Wilq32=this._rootObj.Wilq32,this._rootObj.appendChild(this._canvas),this._rootObj.style.width=this._width+"px",this._rootObj.style.height=this._height+"px",this._eventObj=this._canvas,this._cnv=this._canvas.getContext("2d"),this._handleRotation(t)}}(),_animateStart:function(){this._timer&&clearTimeout(this._timer),this._animateStartTime=+new Date,this._animateStartAngle=this._angle,this._animate()},_animate:function(){var t=+new Date,i=t-this._animateStartTime>this._parameters.duration if(i&&!this._parameters.animatedGif)clearTimeout(this._timer) else{if(this._canvas||this._vimage||this._img){var e=this._parameters.easing(0,t-this._animateStartTime,this._animateStartAngle,this._parameters.animateTo-this._animateStartAngle,this._parameters.duration) this._rotate(~~(10*e)/10)}this._parameters.step&&this._parameters.step(this._angle) var s=this this._timer=setTimeout(function(){s._animate.call(s)},10)}this._parameters.callback&&i&&(this._angle=this._parameters.animateTo,this._rotate(this._angle),this._parameters.callback.call(this._rootObj))},_rotate:function(){var t=Math.PI/180 return IE?function(t){this._angle=t,this._container.style.rotation=t%360+"deg"}:supportedCSS?function(t){this._angle=t,this._img.style[supportedCSS]="rotate("+t%360+"deg)"}:function(i){this._angle=i,i=i%360*t,this._canvas.width=this._width+this._widthAdd,this._canvas.height=this._height+this._heightAdd,this._cnv.translate(this._widthAddHalf,this._heightAddHalf),this._cnv.translate(this._widthHalf,this._heightHalf),this._cnv.rotate(i),this._cnv.translate(-this._widthHalf,-this._heightHalf),this._cnv.scale(this._aspectW,this._aspectH),this._cnv.drawImage(this._img,0,0)}}()},IE&&(Wilq32.PhotoEffect.prototype.createVMLNode=function(){document.createStyleSheet().addRule(".rvml","behavior:url(#default#VML)") try{return!document.namespaces.rvml&&document.namespaces.add("rvml","urn:schemas-microsoft-com:vml"),function(t){return document.createElement("<rvml:"+t+' class="rvml">')}}catch(t){return function(t){return document.createElement("<"+t+' xmlns="urn:schemas-microsoft.com:vml" class="rvml">')}}}())}(jQuery) </script> <script type="text/javascript"> var turnplate={ restaraunts:[], //大转盘奖品名称 colors:[], //大转盘奖品区块对应背景颜色 outsideRadius:192, //大转盘外圆的半径 textRadius:155, //大转盘奖品位置距离圆心的距离 insideRadius:68, //大转盘内圆的半径 startAngle:0, //开始角度 randomRate:[], //控制获奖率，百分制(相加需等于100%)，对应restaraunts(顺序需要保持一致)， bRotate:false //false:停止;ture:旋转 }; $(document).ready(function(){ //动态添加大转盘的奖品与奖品区域背景颜色 turnplate.randomRate = ["12.5%", '12.5%%', '12.5%%', '12.5%%', '12.5%%', '12.5%%', '12.5%%', '12.5%%', '12.5%%', '12.5%%']; turnplate.restaraunts = ["豆皮炒肉", "黄焖鸡", "纸包鱼", "豌豆杂酱", "五虎将", "鱼好酸菜鱼", "小炒茄子 ", "找新的"]; 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(turnplate.randomRate); //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288] rotateFn(item, turnplate.restaraunts[item-1]); }); }); function rnd(rate){ var random = Math.floor(Math.random() * 100); var myRandom = []; var randomList = []; var randomParent = []; for(var i = 0; i < 100; i++){ myRandom.push(parseInt([i]) + 1); } for(var i = 0; i < rate.length; i++){ var temp = []; var start = 0; var end = 0; randomList.push(parseInt(rate[i].split('%')[0])); for(var j = 0; j < randomList.length; j++){ start += randomList[j-1] || 0 end += randomList[j] } temp = myRandom.slice(start, end); randomParent.push(temp) } for(var i = 0; i < randomParent.length; i++){ if($.inArray(random, randomParent[i]) > 0){ return(i+1) } } } //页面所有元素加载完毕后执行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(); //----绘制奖品结束---- } } } </script> </head> <body class="body"> <img src="http://img.gzui.net/img/icon-qian.png" id="shan-img" style="display:none;" /> <img src="http://img.gzui.net/img/icon-ku.png" id="sorry-img" style="display:none;" /> <div class="banner"> <div class="turnplate" style="background-image:url(http://img.gzui.net/img/turnplate-bg.png);background-size:100% 100%;margin:10% auto 0;"> <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas> <img class="pointer" src="http://img.gzui.net/img/turnplate-pointer.png" /> </div> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » jQuery大转盘抽奖（可调中奖率）之中午吃啥 喜欢 (0)or分享 (0)
