<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <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: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:28%;left:36%;top:29%;} .more{display: block;width: 100%;position: fixed;top: 0;left: 0;height: 150px;} .cloud{position: fixed;left: 0;top: 70%;width: 150px;} .cloud2{position: fixed;right: 0;top: 32%;width: 50px;} .cloud3{position: fixed;left: 0;top: 30%;width: 100px;} @media screen and (max- 320px) { .cloud{position: fixed;left: 0;top: 70%;width: 150px;} .cloud2{position: fixed;right: 0;top: 30%;width: 50px;} .cloud3{position: fixed;left: 0;top: 23%;width: 100px;} } @media screen and (min- 321px) and (max- 375px) { .cloud{position: fixed;left: 0;top: 72%;width: 150px;} .cloud2{position: fixed;right: 0;top: 32%;width: 50px;} .cloud3{position: fixed;left: 0;top: 25%;width: 100px;} } @media screen and (min- 376px) { .cloud{position: fixed;left: 0;top: 68%;width: 150px;} .cloud2{position: fixed;right: 0;top: 32%;width: 50px;} .cloud3{position: fixed;left: 0;top: 25%;width: 100px;} } @media screen and (max-height: 480px) { .cloud{position: fixed;left: 0;top: 81%;width: 150px;} .cloud2{position: fixed;right: 0;top: 35%;width: 50px;} .cloud3{position: fixed;left: 0;top: 27%;width: 100px;} } #mark{width: 100%;height: 100%;background: rgba(0,0,0,0.5);position: fixed;top: 0;left: 0;display: none;} .red-img{position: fixed;top: 10%;left: 5%;width: 90%;} </style> <script type="text/javascript" src="/static/web/dial/js/jquery-1.10.2.js"></script> <script type="text/javascript" src="/static/web/dial/js/awardRotate.js"></script> <script type="text/javascript" src="/static/web/layer/layer.js"></script> <script type="text/javascript"> var turnplate={ restaraunts:[], //大转盘奖品名称 colors:[], //大转盘奖品区块对应背景颜色 outsideRadius:184, //大转盘外圆的半径 textRadius:155, //大转盘奖品位置距离圆心的距离 insideRadius:50, //大转盘内圆的半径 startAngle:0, //开始角度 bRotate:false //false:停止;ture:旋转 }; $(document).ready(function(){ //动态添加大转盘的奖品与奖品区域背景颜色 // turnplate.restaraunts = ["优惠券10元", "谢谢参与", "优惠券20元", "优惠券50元", "金币120", "金币300","a", "b", "c", "d"]; // turnplate.colors = ["#FFFFFF","#5fcbd5", "#FFFFFF", "#5fcbd5", "#FFFFFF","#5fcbd5","#FFFFFF","#5fcbd5", "#FFFFFF", "#5fcbd5"]; turnplate.restaraunts = eval({$restaraunts});//奖品内容 turnplate.colors = eval({$color});//奖品颜色 var rotateTimeOut = function (){ $('#wheelcanvas').rotate({ angle:0, animateTo:2160, duration:8000, callback:function (){ alert('网络超时，请检查您的网络设置！'); } }); }; //旋转转盘 item:奖品位置; txt：提示语; var rotateFn = function (item, txt){ // 应该旋转的角度，旋转插件角度参数是角度制。 var baseAngle = 360 / turnplate.restaraunts.length; // 旋转角度 == 270°（当前第一个角度和指针位置的偏移量） + （奖品的位置 * 每块所占的角度 - 每块所占的角度的一半(指针指向区域的中间)） angles = 270 + ((item * baseAngle) - baseAngle / 2); // 因为第一个奖品是从0°开始的，即水平向右方向 $('#wheelcanvas').stopRotate(); $('#wheelcanvas').rotate({ angle:0, animateTo:angles+360*5, duration:8000, callback:function (){ //回调 layer.msg(txt); setTimeout(function () { location.reload(); }, 2000); } }); }; //开始抽奖 $(".pointer").one("click",function(){ if(turnplate.bRotate)return; turnplate.bRotate = !turnplate.bRotate;//开始旋转 var item = 0;//获取随机数(奖品个数范围内) $.ajax({ url : '{:url("interfaces/draw/rand_ss")}', type: "POST", data:{"num":turnplate.restaraunts.length,'user_id':"{:input('user_id')}"}, dataType:'json', success:function(data){ console.log(data); if (data['status'] == 'y') { item = data['rand']; title = data['title']; rotateFn(item, title); } else { layer.msg(data['title']); setTimeout(function () { location.reload(); }, 2000); } } }); }); }); //页面所有元素加载完毕后执行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 = "#FFFFFF"; //font 属性设置或返回画布上文本内容的当前字体属性 ctx.font = 'bold 10px 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(); //改变画布文字颜色 var b = i+2; if(b%2){ ctx.fillStyle = "#E5302F"; }else{ 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); /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/ ctx.fillText(text, -ctx.measureText(text).width / 2, 70); //添加对应图标 var img= document.getElementById("diy-img-" + i); img.onload=function(){ ctx.drawImage(img,-35,-30); }; ctx.drawImage(img,-35,-30); //把当前画布返回（调整）到上一个save()状态之前 ctx.restore(); //----绘制奖品结束---- } } }; </script> </head> <body bgcolor="#fff" style="text-align: center;position: relative;max- 720px;padding-top: 20%;"> <img src="/static/web/dial/images/bg.png" style="display: block; 100%;position: absolute;top:0;left:0;"> {volist name="cover" id="image"} <img src="/{$image}" id="diy-img-{$i - 1}" style="display:none; 72px;height: 72px;" /> {/volist} <div class="banner" style=" 90%;margin: 0 auto 0;"> <div class="turnplate" style="background-image:url(/static/web/dial/images/bg1.png);background-size:100% 100%;"> <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas> <img class="pointer" src="/static/web/dial/images/jt2.png"/> </div> </div> <div style="text-align:center;margin:50px 0; color:white;font:normal 18px/30px '宋体';position: relative;z-index: 2;"> <p>抽奖一次消耗10积分<span style="color: #FFCA29;margin: 0 10px;" id="times"></span></p> </div> </body> </html>