-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
198 lines (176 loc) · 7.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>HTML5抽奖大转盘</title>
<link href="./style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./js/awardRotate.js"></script>
<script type="text/javascript">
var turnplate = {
restaraunts: [], //大转盘奖品名称
colors: [], //大转盘奖品区块对应背景颜色
outsideRadius: 192, //大转盘外圆的半径
textRadius: 155, //大转盘奖品位置距离圆心的距离
insideRadius: 68, //大转盘内圆的半径
startAngle: 0, //开始角度
bRotate: false //false:停止;ture:旋转
};
$(document).ready(function () {
//动态添加大转盘的奖品与奖品区域背景颜色
turnplate.restaraunts = [
{text:'50M免费流量包',count:9},
{text:'10闪币',count:0},
{text:'谢谢参与',count:0},
{text:'20M免费流量包',count:1},
{text:'20闪币',count:0},
];
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, obj) {
item = item+1
var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2));
if (angles < 270) {
angles = 270 - angles;
} else {
angles = 360 - angles + 270;
}
angles = angles + rnd(-1,1)*rnd(10,(360 / (turnplate.restaraunts.length * 2))-10 )
$('#wheelcanvas').stopRotate();
$('#wheelcanvas').rotate({
angle: 0,
animateTo: angles + 1800,
duration: 1000,
callback: function () {
alert(obj.text);
turnplate.bRotate = !turnplate.bRotate;
}
});
};
$('.pointer').click(function () {
if (turnplate.bRotate) return;
turnplate.bRotate = !turnplate.bRotate;
//获取随机数(奖品个数范围内)
let newArr = []
turnplate.restaraunts.map(item=>{
newArr = newArr.concat(Array.from({length:item.count},()=>item.text))
})
console.log(newArr)
var num = rnd(0, newArr.length-1);
let _index = 0
turnplate.restaraunts.map((item,index)=>{
if(item.text == newArr[num]){
_index = index
}
})
//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
rotateFn(_index, turnplate.restaraunts[_index]);
});
});
function rnd(n, m) {
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].text;
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>
<img src="./images/1.png" id="shan-img" style="display:none;" />
<img src="./images/2.png" id="sorry-img" style="display:none;" />
<div class="banner">
<div class="turnplate" style="background-image:url(./images/turnplate-bg.png);background-size:100% 100%;">
<canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
<img class="pointer" src="./images/turnplate-pointer.png" />
</div>
</div>
</body>
</html>