<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.clear{clear:both;}
.banner{width: 550px;height: 550px;margin: 25px auto;}
.turnplate{width: 100%;height: 100%;position: relative;}
.banner .turnplate canvas.item{width:100%;}
.turnplate img.pointer{position: absolute;width:31.5%;height:42.5%;left:34.6%;top:23.5%;}
</style>
<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:63,
startAngle:0,
bRotate:false
};
$(document).ready(function(){
turnplate.restaraunts = ["白妖子", "黄妖子", "蓝妖子", "紫妖子", "橘妖子", "绿妖子", "黑妖子 ", "棕妖子", "红妖子", "粉妖子"];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6",
"#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6",
"#FFFFFF"];
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 (){
turnplate.bRotate = !turnplate.bRotate;
for(var i=0;i<turnplate.colors;i++){
if(txt.indexOf("白")==0){turnplate.colors='red';}
else{turnplate.colors='#FF69B4';}
}
}
});
console.log(txt) ;
};
turnplate.colors[1]='red';
$('.pointer').click(function pointer (){
if(turnplate.bRotate)return;
turnplate.bRotate = !turnplate.bRotate;
var item = rnd(1,turnplate.restaraunts.length);
rotateFn(item, turnplate.restaraunts[item-1]);
console.log(item);
});
});
function rnd(n, m){
var random = Math.floor(Math.random()*(m-n+1)+n);
return random;
}
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);
ctx.strokeStyle = "#FFBE04";
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();
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;
ctx.translate(211 + Math.cos(angle + arc / 2) *
turnplate.textRadius, 211 + Math.sin(angle + arc / 2) *
turnplate.textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
if(text.indexOf("白")==0){
ctx.fillStyle='white';
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
}else
{ ctx.fillStyle='yellow';
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
}
ctx.restore();
}
}
}
</script>
</head>
<body style="background:#e62d2d;overflow-x:hidden;">
<img src="images/1.png" id="shan-img" style="display:none;" />
<img src="images/2.png" id="sorry-img" style="display:none;" />
<div>
<div style="background-image:url(images/turnplate-bg.png);background-size:100% 100%;">
<canvas id="wheelcanvas" width="422px" height="422px"></canvas>
<img src="images/turnplate-pointer.png"/>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</body>
</html>
1 回答
依然c
TA贡献54条经验 获得超32个赞
script写在body的末尾好点点。我没仔细看代码啊，只知道应该是在canvas里面，转盘用的是canvas的圆把，指针也是计算角度把，指针记录下那个角度，然后在canvas的圆上对称画出来，比如停在15度，那你画0到30度，ctx.arc(211,211,半径, 0, 1/6 * Math.PI); 大概是这么个思路
点击展开后面1条
添加回答
举报
0/150
提交
取消