You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
354 lines
14 KiB
354 lines
14 KiB
5 years ago
|
|
||
|
|
var turnplate={
|
||
|
|
restaraunts:[], //大转盘奖品名称
|
||
|
|
colors:[], //大转盘奖品区块对应背景颜色
|
||
|
|
outsideRadius:192, //大转盘外圆的半径
|
||
|
|
textRadius:155, //大转盘奖品位置距离圆心的距离
|
||
|
|
insideRadius:68, //大转盘内圆的半径
|
||
|
|
startAngle:0, //开始角度
|
||
|
|
bRotate:false //false:停止;ture:旋转
|
||
|
|
};
|
||
|
|
choujiang=[
|
||
|
|
{name:"钦州支队",idnum:1,result:""},
|
||
|
|
{name:"南宁支队",idnum:1,result:""},
|
||
|
|
{name:"柳州支队",idnum:1,result:""},
|
||
|
|
{name:"河池支队",idnum:1,result:""},
|
||
|
|
{name:"来宾支队",idnum:1,result:""},
|
||
|
|
{name:"贺州支队",idnum:1,result:""},
|
||
|
|
{name:"防城港支队",idnum:1,result:""},
|
||
|
|
{name:"崇左支队",idnum:1,result:""},
|
||
|
|
{name:"贵港支队",idnum:9,result:""},
|
||
|
|
{name:"梧州支队",idnum:10,result:""},
|
||
|
|
{name:"百色支队",idnum:11,result:""},
|
||
|
|
{name:"玉林支队",idnum:12,result:""},
|
||
|
|
{name:"北海支队",idnum:13,result:""},
|
||
|
|
{name:"桂林支队",idnum:14,result:""}
|
||
|
|
]
|
||
|
|
$(document).ready(function(){
|
||
|
|
//var chooseid = $( "span[name='zhidui']").attr('id');
|
||
|
|
$("span[name='aaa']").on("click",function(){
|
||
|
|
console.log($(this).html())
|
||
|
|
if($(this).html()=="钦州支队"){
|
||
|
|
turnplate.restaraunts = ["广西东油沥青有限公司", "钦州吾悦广场", "钦州天亿石化有限公司"];
|
||
|
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6"];
|
||
|
|
console.log(choujiang[0].result)
|
||
|
|
if(choujiang[0].idnum<=2)
|
||
|
|
{
|
||
|
|
$("#zhuanpan").show()
|
||
|
|
$("#end").hide();
|
||
|
|
console.log(choujiang[0].idnum)
|
||
|
|
choujiang[0].idnum++
|
||
|
|
choujiang[0].result='钦州吾悦广场'
|
||
|
|
$("#jieguo").empty()
|
||
|
|
}else{
|
||
|
|
$("#zhuanpan").hide()
|
||
|
|
$("#end").show();
|
||
|
|
console.log(choujiang[0].idnum)
|
||
|
|
$("#jieguo").empty()
|
||
|
|
$("#jieguo").append("您的抽签结果为：</br>"+choujiang[0].result)
|
||
|
|
}
|
||
|
|
|
||
|
|
drawRouletteWheel()
|
||
|
|
}else if($(this).html()=="南宁支队")
|
||
|
|
{
|
||
|
|
turnplate.restaraunts = ["九洲国际（超高层）", "南宁国际会展中心", "维景国际酒店", "荔园山庄 "];
|
||
|
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];
|
||
|
|
if(choujiang[1].idnum<=2)
|
||
|
|
{
|
||
|
|
$("#zhuanpan").show()
|
||
|
|
$("#end").hide();
|
||
|
|
choujiang[1].idnum++
|
||
|
|
choujiang[1].result='九洲国际（超高层）'
|
||
|
|
$("#jieguo").empty()
|
||
|
|
}else{
|
||
|
|
$("#zhuanpan").hide()
|
||
|
|
$("#end").show();
|
||
|
|
$("#jieguo").empty()
|
||
|
|
$("#jieguo").append("您的抽签结果为：</br>"+choujiang[1].result)
|
||
|
|
}
|
||
|
|
drawRouletteWheel()
|
||
|
|
}else if($(this).html()=="柳州支队")
|
||
|
|
{
|
||
|
|
turnplate.restaraunts = ["广西柳州莲花山庄", "柳州万达广场", "龙城地下商业街", "板栗园加气站 ","地王财富中心"];
|
||
|
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6"];
|
||
|
|
$("#zhuanpan").show()
|
||
|
|
$("#end").hide();
|
||
|
|
$("#jieguo").empty()
|
||
|
|
drawRouletteWheel()
|
||
|
|
}else if($(this).html()=="河池支队")
|
||
|
|
{
|
||
|
|
turnplate.restaraunts = ["河池市中石化金城江油库", "河池市宜州区地下商业街", "南城百货（地下） ","宁铁燃气有限责任公司","广西河池市大洋购物中心"];
|
||
|
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6"];
|
||
|
|
$("#zhuanpan").show()
|
||
|
|
$("#end").hide();
|
||
|
|
$("#jieguo").empty()
|
||
|
|
drawRouletteWheel()
|
||
|
|
}else if($(this).html()=="来宾支队")
|
||
|
|
{
|
||
|
|
turnplate.restaraunts = ["来宾饭店（高层）", "宝晨化工", "天成百货（地下） ","百悦商业广场(地下）","来宾市方盛广场（人员密集）"];
|
||
|
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6"];
|
||
|
|
$("#zhuanpan").show()
|
||
|
|
$("#end").hide();
|
||
|
|
$("#jieguo").empty()
|
||
|
|
drawRouletteWheel()
|
||
|
|
}else if($(this).html()=="贺州支队")
|
||
|
|
{
|
||
|
|
turnplate.restaraunts = ["贺州市国际酒店（高层）", "宝晨化工有限公司", "贺州市南宁百货大楼", "远东国贸地下停车场 "];
|
||
|
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];
|
||
|
|
$("#zhuanpan").show()
|
||
|
|
$("#end").hide();
|
||
|
|
$("#jieguo").empty()
|
||
|
|
drawRouletteWheel()
|
||
|
|
}
|
||
|
|
else if($(this).html()=="防城港支队")
|
||
|
|
{
|
||
|
|
turnplate.restaraunts = ["防城港供电局", "北京华联超市桂海东盟店", "港宸国际大酒店（高层）", "永旺天和商贸有限公司(只做地下一） ", "广西中油能源有限公司 ","中海油广西防城港天然气有限责任公司 "];
|
||
|
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];
|
||
|
|
$("#zhuanpan").show()
|
||
|
|
$("#end").hide();
|
||
|
|
$("#jieguo").empty()
|
||
|
|
drawRouletteWheel()
|
||
|
|
}else if($(this).html()=="崇左支队")
|
||
|
|
{
|
||
|
|
turnplate.restaraunts = ["崇左油库","崇左市雅图影视广场（6层商场）"];
|
||
|
|
turnplate.colors = ["#FFF4D6", "#FFFFFF"];
|
||
|
|
$("#zhuanpan").show()
|
||
|
|
$("#end").hide();
|
||
|
|
$("#jieguo").empty()
|
||
|
|
drawRouletteWheel()
|
||
|
|
}else if($(this).html()=="贵港支队")
|
||
|
|
{
|
||
|
|
turnplate.restaraunts = ["广西威汉鞋业有限公司", "贵港市嘉龙海杰电子科技有限公司", "贵港市覃塘区人民医院综合楼", "贵港市中国石油分公司油库 ", "维多利亚酒店（高层）","平南中心购物广场（地下）"];
|
||
|
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];
|
||
|
|
$("#zhuanpan").show()
|
||
|
|
$("#end").hide();
|
||
|
|
$("#jieguo").empty()
|
||
|
|
drawRouletteWheel()
|
||
|
|
}else if($(this).html()=="梧州支队")
|
||
|
|
{
|
||
|
|
turnplate.restaraunts = ["广西威汉鞋业有限公司", "贵港市嘉龙海杰电子科技有限公司", "贵港市覃塘区人民医院综合楼", "贵港市中国石油分公司油库 ", "梧州市中石化火山油库","平南中心购物广场（地下）", ];
|
||
|
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];
|
||
|
|
$("#zhuanpan").show()
|
||
|
|
$("#end").hide();
|
||
|
|
$("#jieguo").empty()
|
||
|
|
drawRouletteWheel()
|
||
|
|
}else if($(this).html()=="百色支队")
|
||
|
|
{
|
||
|
|
turnplate.restaraunts = ["平果地下商业街", "三雷油库", "安达曼国际酒店(高层）", "恒宁城市广场（大型城市综合体） "];
|
||
|
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];
|
||
|
|
$("#zhuanpan").show()
|
||
|
|
$("#end").hide();
|
||
|
|
$("#jieguo").empty()
|
||
|
|
drawRouletteWheel()
|
||
|
|
}else if($(this).html()=="玉林支队")
|
||
|
|
{
|
||
|
|
turnplate.restaraunts = ["平果地下商业街", "三雷油库", "安达曼国际酒店(高层）", "恒宁城市广场（大型城市综合体） ","玉林市中医医院"];
|
||
|
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6"];
|
||
|
|
$("#zhuanpan").show()
|
||
|
|
$("#end").hide();
|
||
|
|
$("#jieguo").empty()
|
||
|
|
drawRouletteWheel()
|
||
|
|
}else if($(this).html()=="北海支队")
|
||
|
|
{
|
||
|
|
turnplate.restaraunts = ["平果地下商业街", "三雷油库", "安达曼国际酒店(高层）", "恒宁城市广场（大型城市综合体） ","和安宁春城（大型城市综合体）"];
|
||
|
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6"];
|
||
|
|
$("#zhuanpan").show()
|
||
|
|
$("#end").hide();
|
||
|
|
$("#jieguo").empty()
|
||
|
|
drawRouletteWheel()
|
||
|
|
}else if($(this).html()=="桂林支队")
|
||
|
|
{
|
||
|
|
turnplate.restaraunts = ["兴安油库", "宏谋酒店（高层）"];
|
||
|
|
turnplate.colors = ["#FFF4D6", "#FFFFFF"];
|
||
|
|
$("#zhuanpan").show()
|
||
|
|
$("#end").hide();
|
||
|
|
$("#jieguo").empty()
|
||
|
|
drawRouletteWheel()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
console.log(turnplate.restaraunts)
|
||
|
|
//动态添加大转盘的奖品与奖品区域背景颜色
|
||
|
|
/* turnplate.restaraunts = ["广西东油沥青有限公司", "钦州天亿石化有限公司", "九洲国际（超高层）", "南宁国际会展中心 ", "维景国际酒店", "荔园山庄"];
|
||
|
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"]; */
|
||
|
|
/* turnplate.restaraunts = ["白云边", "关公坊", "黄鹤楼", "国宝 ", "陈克明", "金沙河", "雪花", "康师傅", "脉动","奥星","金龙鱼","中昌"];
|
||
|
|
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#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 (){
|
||
|
|
console.log(turnplate.restaraunts.length)
|
||
|
|
$("#zhuanpan").hide()
|
||
|
|
$("#end").show();
|
||
|
|
var dataLength=turnplate.restaraunts.length
|
||
|
|
if(dataLength>=5)
|
||
|
|
{
|
||
|
|
$("#jieguo").append("您的抽签结果为：</br>"+turnplate.restaraunts[4])
|
||
|
|
}else if(dataLength==3){
|
||
|
|
$("#jieguo").append("您的抽签结果为：</br>"+turnplate.restaraunts[1])
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
$("#jieguo").append("您的抽签结果为：</br>"+turnplate.restaraunts[0])
|
||
|
|
}
|
||
|
|
turnplate.bRotate = !turnplate.bRotate;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
$('.pointer').click(function (){
|
||
|
|
if(turnplate.bRotate)return;
|
||
|
|
turnplate.bRotate = !turnplate.bRotate;
|
||
|
|
//获取随机数(奖品个数范围内)
|
||
|
|
var item = rnd(1,turnplate.restaraunts.length);
|
||
|
|
console.log(item)
|
||
|
|
//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
|
||
|
|
rotateFn(item, turnplate.restaraunts[item-1]);
|
||
|
|
/* switch (item) {
|
||
|
|
case 1:
|
||
|
|
rotateFn(252, turnplate.restaraunts[0]);
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
rotateFn(216, turnplate.restaraunts[1]);
|
||
|
|
break;
|
||
|
|
case 3:
|
||
|
|
rotateFn(180, turnplate.restaraunts[2]);
|
||
|
|
break;
|
||
|
|
case 4:
|
||
|
|
rotateFn(144, turnplate.restaraunts[3]);
|
||
|
|
break;
|
||
|
|
case 5:
|
||
|
|
rotateFn(108, turnplate.restaraunts[4]);
|
||
|
|
break;
|
||
|
|
case 6:
|
||
|
|
rotateFn(72, turnplate.restaraunts[5]);
|
||
|
|
break;
|
||
|
|
case 7:
|
||
|
|
rotateFn(36, turnplate.restaraunts[6]);
|
||
|
|
break;
|
||
|
|
case 8:
|
||
|
|
rotateFn(360, turnplate.restaraunts[7]);
|
||
|
|
break;
|
||
|
|
case 9:
|
||
|
|
rotateFn(324, turnplate.restaraunts[8]);
|
||
|
|
break;
|
||
|
|
case 10:
|
||
|
|
rotateFn(288, turnplate.restaraunts[9]);
|
||
|
|
break;
|
||
|
|
} */
|
||
|
|
console.log(item);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
//控制中奖结果
|
||
|
|
function rnd(n, m){
|
||
|
|
var random = 5;
|
||
|
|
//var random = Math.floor(Math.random()*(m-n+1)+n);
|
||
|
|
return random;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//页面所有元素加载完毕后执行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();
|
||
|
|
//----绘制奖品结束----
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|