Skip to content

Commit cb2f4b0

Browse files
sunseekerssunseekers
authored
旋转转盘抽奖
随机生成任意旋转角度；利用随机数+css3画转盘
1 parent 2483c0d commit cb2f4b0

3 files changed

Lines changed: 229 additions & 0 deletions

File tree

‎draw/draw.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<title>随机抽奖</title>
7+
<meta name="description" content="">
8+
<meta name="keywords" content="">
9+
<style type="text/css">
10+
body,html{width: 100%;height: 100%;}
11+
*{
12+
padding: 0px;
13+
margin: 0px;
14+
font-size: 16px;
15+
font-family: "Microsoft YaHei";
16+
}
17+
.radius{
18+
width: 300px;
19+
height: 300px;
20+
margin: 100px auto;
21+
position: relative;
22+
}
23+
.radius canvas{
24+
position: absolute;
25+
}
26+
#canvas{
27+
background-color: white;
28+
border-radius: 100%;
29+
}
30+
#canvas1,#canvas3{
31+
left: 50px;
32+
top: 50px;
33+
z-index: 30;
34+
}
35+
#canvas2{
36+
left: 75px;
37+
top: 75px;
38+
z-index: 20;
39+
}
40+
#canvas{
41+
-o-transform: transform 6s;
42+
-ms-transform: transform 6s;
43+
-moz-transform: transform 6s;
44+
-webkit-transform: transform 6s;
45+
transition: transform 6s;
46+
-o-transform-origin: 50% 50%;
47+
-ms-transform-origin: 50% 50%;
48+
-moz-transform-origin: 50% 50%;
49+
-webkit-transform-origin: 50% 50%;
50+
transform-origin: 50% 50%;
51+
}
52+
#btn{
53+
width: 60px;
54+
height: 60px;
55+
left: 120px;
56+
top: 120px;
57+
border-radius: 100%;
58+
position: absolute;
59+
cursor: pointer;
60+
border: none;
61+
background: transparent;
62+
outline: none;
63+
z-index: 40;
64+
}
65+
</style>
66+
<script src='js/jquery-2.1.1.min.js'></script>
67+
<script src='js/index.js'></script>
68+
</head>
69+
<body>
70+
<!--
71+
1.把旋转盘画出来；
72+
2.计算随机生成一个旋转角度；
73+
3.点击按钮旋转
74+
-->
75+
<div class="radius">
76+
<canvas id="canvas" width="300" height="300"></canvas>
77+
<canvas id="canvas1" width="200" height="200"></canvas>
78+
<canvas id="canvas2" width="200" height="200"></canvas>
79+
<canvas id="canvas3" width="150" height="150"></canvas>
80+
<button id="btn"></button>
81+
</div>
82+
</body>
83+
</html>

‎draw/js/index.js‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
/**
2+
*
3+
* @authors Your Name ([email protected])
4+
* @date 2017-10-30 11:13:20
5+
* @version $Id$
6+
*/
7+
$(function(){
8+
const color = ["#626262","#787878","rgba(0,0,0,0.5)","#DCC722","white","#FF4350"],
9+
info = ["谢谢参与"," 1000"," 10"," 500"," 100"," 4999"," 1"," 20"],
10+
info1 = ['再接再厉',' 元',' 元',' 淘金币',' 元',' 淘金币',' 元',' 淘金币'];
11+
let clickNum=5,//可抽奖次数
12+
rotateNum=0,//旋转次数
13+
angles,//旋转角度
14+
notice;//中奖公告
15+
$('#btn').on('click',function(){
16+
if(clickNum>=1){
17+
clickNum--;
18+
runCup();
19+
//转盘旋转过程“开始抽奖”按钮无法点击
20+
$("#btn").attr('disabled',true);
21+
rotateNum++;
22+
//“开始抽奖”按钮无法点击恢复点击
23+
setTimeout(function(){
24+
alert(notice);
25+
$('#btn').removeAttr("disabled", true);
26+
},6000);
27+
}else{
28+
alert("亲，抽奖次数已用光！");
29+
30+
}
31+
});
32+
//转盘旋转
33+
function runCup(){
34+
probability();
35+
const degValue = 'rotate('+angles+'deg'+')';
36+
$("#canvas").css('transform',degValue);
37+
}
38+
//各奖项对应的旋转角度及中奖公告内容
39+
function probability(){
40+
//获取随机数
41+
let num=parseInt(Math.random()*7);
42+
switch (num) {
43+
case 0: angles=2160*rotateNum+ 1800;notice = info[0] + info1[0];
44+
break;
45+
case 1: angles=2160*rotateNum+ 1845;notice = info[7] + info1[7];
46+
break;
47+
case 2: angles=2160*rotateNum+ 1890;notice = info[6] + info1[6];
48+
break;
49+
case 3: angles=2160*rotateNum+ 1935;notice = info[5] + info1[5];
50+
break;
51+
case 4: angles=2160*rotateNum+ 1980;notice = info[4] + info1[4];
52+
break;
53+
case 5: angles=2160*rotateNum+ 2025;notice = info[3] + info1[3];
54+
break;
55+
case 6: angle=2160*rotateNum+ 2070;notice = info[2] + info1[2];
56+
break;
57+
case 7: angles=2160*rotateNum+ 2115;notice = info[1] + info1[1];
58+
break;
59+
}
60+
}
61+
circle();
62+
function circle(){
63+
const ctx=$("#canvas")[0].getContext('2d'),
64+
ctx1=$("#canvas1")[0].getContext('2d'),
65+
ctx2=$("#canvas2")[0].getContext('2d'),
66+
ctx3=$("#canvas3")[0].getContext('2d');
67+
console.log($("#canvas"));//$("#canvas")获取到的是所有id为canvas的元素，是一个集合
68+
createCricle();
69+
createCirText();
70+
initPoint();
71+
//绘制外面的圆
72+
function createCricle(){
73+
let startAngle=0;//扇形开始的角度
74+
let endAngle=0;//扇形结束的角度
75+
for(let i=0;i<8;i++){
76+
startAngle=Math.PI*(i/4-1/8);
77+
endAngle=startAngle+Math.PI*(1/4);
78+
ctx.save();
79+
ctx.beginPath();
80+
ctx.arc(150,150,100,startAngle,endAngle,false);
81+
ctx.lineWidth=120;
82+
i%2==0?(ctx.strokeStyle=color[0]):(ctx.strokeStyle=color[1]);
83+
ctx.stroke();
84+
ctx.restore();
85+
}
86+
}
87+
function createCirText(){
88+
ctx.textAlign='start';
89+
ctx.textBaseline='middle';
90+
ctx.fillStyle=color[3];
91+
const step=Math.PI/4;
92+
for(let i=0;i<8;i++){
93+
ctx.save();
94+
ctx.beginPath();
95+
ctx.translate(150,150);
96+
ctx.rotate(i*step);
97+
ctx.font = " 20px Microsoft YaHei";
98+
ctx.fillStyle = color[3];
99+
ctx.fillText(info[i],-30,-115,60);
100+
ctx.font = " 14px Microsoft YaHei";
101+
ctx.fillText(info1[i],-30,-95,60);
102+
ctx.closePath();
103+
ctx.restore();
104+
}
105+
}
106+
//转盘的指针
107+
function initPoint(){
108+
//箭头指针
109+
ctx1.beginPath();
110+
ctx1.moveTo(100,24);
111+
ctx1.lineTo(90,62);
112+
ctx1.lineTo(110,62);
113+
ctx1.lineTo(100,24);
114+
ctx1.fillStyle = color[5];
115+
ctx1.fill();
116+
ctx1.closePath();
117+
//中间小圆
118+
ctx3.beginPath();
119+
ctx3.arc(100,100,40,0,Math.PI*2,false);
120+
ctx3.fillStyle = color[5];
121+
ctx3.fill();
122+
ctx3.closePath();
123+
//小圆文字
124+
ctx3.font = "Bold 20px Microsoft YaHei";
125+
ctx3.textAlign='start';
126+
ctx3.textBaseline='middle';
127+
ctx3.fillStyle = color[4];
128+
ctx3.beginPath();
129+
ctx3.fillText('开始',80,90,40);
130+
ctx3.fillText('抽奖',80,110,40);
131+
ctx3.fill();
132+
ctx3.closePath();
133+
//中间圆圈
134+
ctx2.beginPath();
135+
ctx2.arc(75,75,75,0,Math.PI*2,false);
136+
ctx2.fillStyle = color[2];
137+
ctx2.fill();
138+
ctx2.closePath();
139+
}
140+
}
141+
142+
})

0 commit comments

Comments
 (0)