<!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>