<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" type="text/css" href="css/mui.min.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <style> .clear{clear:both;} /* 大转盘样式 */ .drawbanner{display:block;width:85%;margin:0 auto;} .drawbanner .turnplate{display:block;width:100%;position:relative;} .drawbanner .turnplate canvas.item{width:100%;} .drawbanner .turnplate img.pointer{ position: absolute; width: 25%; height: 30%; left: 37.5%; top: 32%; } #img-box{display:none;} </style> </head> <body style="background: #fff3f4;"> <div class="loading-bg"> <div class="mui-loading"> <div class="mui-spinner"> </div> 加载中... </div> </div> <div class="mui-content" style="background: #fff3f4;"> <div style="margin-bottom: 10px;"> <img width="100%" src="images/wheel-title1.png" /> </div> <div style="position: relative;"> <div id="img-box"> </div> <div class="drawbanner"> <div class="turnplate" style="background-image:url(images/turnplate-bg.png);background-size:100% 98%;background-repeat: no-repeat;"> <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas> <img class="pointer" src="images/turnplate-pointer.png"/> </div> </div> <div style="text-align: center;"> <button class="pointer" type="button" style="background: #e9004c;color: #fff;border: 0;border-radius: 5px;display: block;width:70%;margin:20px 15%;padding:11px 0;">立即抽奖</button> </div> </div> </div> </div> <script src="js/mui.min.js"></script> <script src="js/jquery-2.1.1.min.js"></script> <script src="js/awardRotate.js"></script> <script src="js/main.js"></script> <script type="text/javascript" src="js/page/wechat-utils-1.0.js"></script> <script type="text/javascript"> var turnplate={ restaraunts:[], //大转盘奖品名称 colors:[], //大转盘奖品区块对应背景颜色 outsideRadius:166, //大转盘外圆的半径 textRadius:140, //大转盘奖品位置距离圆心的距离 insideRadius:40, //大转盘内圆的半径 startAngle:0, //开始角度 bRotate:false //false:停止;ture:旋转 }; var prizeList = null; $(document).ready(function(){ window.repleFlag = false; window.wxFriend = { "appId": "", "imgUrl":domanUrl + '/iamberry/common/shop/images/1.png', "link":"https:" + domanUrl+"/iamberry/wechat/activity/share_luck_draw", "desc":"哎呀!我差一点就抽到iPhone7了!亮黑版,32G啊!小伙伴你也来试试吧!",//描述 "title":"我离iPhone7亮黑版 32G仅一步之遥,小伙伴你快来一起抽吧!", //标题 "netError":"您的网络异常,请刷新重试!如多次刷新无效,请向我们反应 ~", "shareTimeSuccess":"分享成功", //这里是分享朋友圈后调用的文字 "shareTimeCancel":"已取消分享", //这里是取消分享给朋友圈后调用的文字 "shareAppSuccess":"分享成功", //这里是分享好友后调用的文字 "shareAppCancel":"已取消分享" //这里是取消分享给好友后调用的文字 }; getConfig(); //动态添加大转盘的奖品与奖品区域背景颜色 $.ajax('/iamberry/wechat/game/get_prize_info',{ data: { prizeGameId:1 }, dataType:'json', async:true, type:'post', timeout:15000, xhrFields: { withCredentials: true }, crossDomain: true, success:function(dt){ if (dt.isRedirect) { location.href = dt.redirectURL; } else { if (dt.status) { prizeList = dt.data; //console.log(prizeList); mui(prizeList).each(function(index){ turnplate.restaraunts[index] = this.prizeName; if ((index + 1) % 2 == 0) { turnplate.colors[index] = "#ff9c9d"; } else { if (index == (prizeList.length - 1)) { turnplate.colors[index] = "#f99eaa"; } else { turnplate.colors[index] = "#f76f7d"; } } //先把图片加载出来 $("#img-box").append('<img src="'+this.prizeImage+'" id="'+this.prizeId+'"/>'); }); //防止图片没加载完设置1秒后再绘制canvas setTimeout(function(){ drawRouletteWheel() document.querySelector('.loading-bg').style.display = 'none'; },1000); } else { } } }, error:function(xhr,type,errorThrown){ } }); //旋转转盘 item:奖品位置; txt:提示语; var rotateFn = function (item, txt, to){ 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:(to == null ? (angles+1800) : to), duration:3000, callback:function (){ turnplate.bRotate = !turnplate.bRotate; } }); }; $(".pointer").on("click",function(){ //去产品列表 mui.openWindow({ url: base_path + '/index.html' //index.html }); }); }); function drawRouletteWheel() { var canvas = dc("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 = "rgba(0,0,0,0)";//边框颜色 //font 属性设置或返回画布上文本内容的当前字体属性 ctx.font = '17px Arial'; for(var i = 0; i < turnplate.restaraunts.length; i++) { //添加对应图标 if (prizeList != null) { 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 = "#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); /** 下面代码根据奖品类型、奖品名称长度渲染不同效果,如字体、颜色、图片效果。(具体根据实际情况改变) **/ //在画布上绘制填色的文本。文本的默认颜色是黑色 //measureText()方法返回包含一个对象,该对象包含以像素计的指定字体宽度 ctx.fillText(text, -ctx.measureText(text).width / 2, 0); var img= dc(prizeList[i].prizeId); ctx.drawImage(img,-25,10); //把当前画布返回(调整)到上一个save()状态之前 } //----绘制奖品结束---- ctx.restore(); } } } </script> </body> </html>