<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?=?["白妖子",?"黃妖子",?"藍(lán)妖子",?"紫妖子",?"橘妖子",?"綠妖子",?"黑妖子?",?"棕妖子",?"紅妖子",?"粉妖子"];
?????????????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>
如何設(shè)置指針停下后，中獎(jiǎng)區(qū)域的顏色會(huì)改變，在$(document).ready(function()函數(shù)中設(shè)置了不起作用
jugge
2017-02-28 20:36:25
