84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
现在后端是传来这个圆盘的背景图片和 上面各个奖项的文字，然后我们前端需要把文字都放在这个圆盘上，请问哪位大虾可以告诉我怎么实现吗
试试
transform: rotate(angle)
当然，用ps做个死的也是可以哒，哈哈
还有canvas也能做啊
这个应该是点击之后就有结果，然后看看要转多少度，再控制转速什么吧。
没做过这个，不知道你怎么做。
<p class="prizeActive-context">
<p id="turnplatewrap"> <p id="turnplate"> <p class="platebtn"></p> <p id="msg" style="display: none"> 非常遗憾<br />没有中奖 </p> <canvas id="canvas">您的浏览器不支持</canvas> </p> <p class="f-textAlignCenter fontColor-white f-fontSize"> 剩余 <span class="lotteryTime">0</span> 次 </p> </p> <!--抽奖活动区--> <?php if($LuckDrawId):?> <p class="lottery-part2"> <p class="clearfix f-marginLeft f-mt5" > <p class="floatLeft f-width60"> <p class="f-actwds fontColor-white">一、活动时间</p> <p class="f-sm"><?php echo StringHelper::substr($weLuckDraw->start_date_time,0,-3)?> 至 <?php echo StringHelper::substr($weLuckDraw->end_date_time,0,-3)?></p> <p class="f-actwds fontColor-white">二、活动规则</p> </p> <p class="floatLeft f-width40 f-luckImg "> <img src="<?php echo Yii::app()->baseUrl.$weLuckDraw->url; ?>" /> </p> </p> <p class="f-lotteryRules f-marginLeft" > <?php echo nl2br($weLuckDraw->luck_raw_desc);?> </p> <p style="height:10px;width:100%;position:absolute;display:block;margin-top:10px;line-height:30px;"></p> <?php if(isset($template)):?> <p class="f-LotterySection"> <?php echo $template->content;?> </p> <?php endif; ?> </p> <?php endif;?> <!--抽奖活动区--> <script type="text/javascript"> $(function(){ var content=$('.f-lotteryRules').html(); }) </script>
</p>
<script type="text/javascript">var core={
canvas:document.getElementById('canvas'), cxt:this.canvas.getContext('2d'), x:0, y:0, words:['五等奖','谢谢参与','一等奖','谢谢参与','二等奖','谢谢参与','三等奖','谢谢参与','四等奖','谢谢参与'], color:['transparent','transparent','transparent','transparent','transparent','transparent','transparent','transparent','transparent','transparent'], deg:Math.PI/180, startTimer:null, hasLottery:"<?php echo $status?>",//检查是否有抽奖活动 lotteryTime : 0 ,// 抽奖次数 isClick:false, lightSwitch : 0, //闪灯切换开关. 0 和 1间切换 height: '250', //帧高度 height2:'592', //帧高度2 virtualDistance:8000, //总路程 ，速度越快，切换到下帧的时间越快: 切换到下帧的时间 = virtualDistance/curSpeed minResistance:5, //基本阻力 Cx:0.01 ,//阻力系数 accSpeed:10,//加速度 accFrameLen:40, // 加速度持续帧数 minSpeed:20, maxSpeed:150, frameLen:10, // 总数 totalFrame:0, //累计数 curFrame : 0, //当前帧 curSpeed : 20, //上帧速度 lotteryIndex:6 ,//奖品index errorIndex:6,// 异常index init : function(){ this.lotteryPrepare(); this.initCanvas(); core.bg(); $('body').css('background','#F29209'); this.freshLottery();//更新抽奖次数 $('.platebtn').click(function(){ if(core.clickLock()){ core.winPrice(); core.lottery();//开始抽奖 } }); var _this=this; }, initCanvas:function(){ var width=592; var height=592; if(window.innerWidth>=768){ width=width; height=width; }else{ width=250; height=250; } this.canvas.width=width; this.canvas.height=height; },
lotteryPrepare:function(){
var getlotteryTimesUrl ="<?php echo Yii::app()->createAbsoluteUrl('weChat/luckDraw/getRestLuckTimes',array('LuckDrawId'=>$LuckDrawId,'uid'=>$uid))?>"; $.ajax({ type:'get', url:getlotteryTimesUrl, async:false, dataType:'json', beforeSend:function(xmlHttp){ xmlHttp.setRequestHeader("If-Modified-Since","0"); xmlHttp.setRequestHeader("Cache-Control","no-cache"); }, success: function(times){ core.lotteryTime = times; }, error:function(){ } }); if(core.hasLottery !=0){ var itemNameUrl = "<?php echo Yii::app()->createAbsoluteUrl('weChat/luckDraw/getItemsName',array('LuckDrawId'=>$LuckDrawId))?>"; $.ajax({ type:'get', url:itemNameUrl, async:false, dataType:'json', success: function(data){ core.words = data; }, error:function(){ } }); }
},
winPrice : function(){ var drawUrl = "<?php echo $this->createUrl('draw',array('LuckDrawId'=>$LuckDrawId,'uid'=>$uid))?>"; $.ajax({ type:'get', url:drawUrl, //cache:false async:false, success: function(data){ if(data == 'nonDraw') { //alert('网络异常！请重试'); //location.reload() core.showMsg('网络异常！请重试'); setTimeout(function(){ location.reload(); },2000) } else { core.lotteryIndex=parseInt(data)-1; } } }); },
bg : function(){
var cxt=this.cxt; if(window.innerWidth>=768){ cxt.translate(296,296); }else{ cxt.translate(125,125); } for(var i=0;i<10;i++){ cxt.save(); cxt.rotate(36*(i)*Math.PI/180); core.drowOne(this.color[i],core.words[i]); cxt.closePath(); cxt.restore(); } }, drowOne: function(fillStyle,words){ var cxt=this.cxt; cxt.save(); cxt.fillStyle=fillStyle; cxt.beginPath(); //画36°弧 cxt.save(); cxt.moveTo(core.x,core.y); cxt.rotate(-18*Math.PI/180); cxt.arc(core.x,core.y,100,0,core.deg*36,false); cxt.fill(); cxt.restore(); //绘制文本 if(window.innerWidth>=768){ cxt.font='18px 黑体'; }else{ cxt.font='14px 黑体';} cxt.fillStyle='#FFE26E'; if(window.innerWidth>=768){ cxt.fillText(words,core.x+100,core.y+5,50) }else{ cxt.fillText(words,core.x+40,core.y+5,50) } cxt.closePath(); cxt.restore(); }, clickLock:function(){ if(core.hasLottery == 1){ this.showMsg('抽奖活动未开始'); return false; }else if(core.hasLottery == 3){ this.showMsg('此抽奖活动已经结束'); return false; }else if(core.hasLottery == 0){ this.showMsg('您没有权限参加此次活动'); return false; } else{ if(this.isClick==false){ this.showMsg('正在抽奖中'); return; } if(this.lotteryTime==0){ this.showMsg('没有次数了'); return false; } } return true; }, lottery:function(){ this.lotteryTime--;//次数减1 this.freshLottery();//更新抽奖次数 this.turnAround(); //灯环绕闪烁 this.totalFrame=0; //重置 this.curSpeed=this.minSpeed; }, freshSpeed : function(){ var totalResistance=this.minResistance+this.curSpeed*this.Cx;//总阻力值 var accSpeed=this.accSpeed; // 加速度 15 var curSpeed=this.curSpeed; // 初始速度 20 if(this.totalFrame>=this.accFrameLen){ accSpeed=0; } curSpeed=curSpeed-totalResistance+accSpeed; if(curSpeed<this.minSpeed){ curSpeed=this.minSpeed; }else if(curSpeed>this.maxSpeed){ curSpeed=this.maxSpeed; } this.curSpeed=curSpeed;
turnAround:function(){ this.isClick=false; var intervalTime=parseInt(this.virtualDistance/this.curSpeed); var _this=this; this.timer=window.setTimeout('core.changeNext()',intervalTime); }, changeNext:function(){ if(this.lotteryIndex!='undefined' && this.curFrame==this.lotteryIndex && this.curSpeed <= ((parseInt(this.minSpeed))+10) && this.totalFrame > this.accFrameLen){ this.isClick=true; if(this.lotteryIndex-3>=0){ if(core.words[this.lotteryIndex-3]=="谢谢参与"){ this.showMsg('非常遗憾<br />没有中奖'); }else{ var uri=$.URL2URI("<?php echo Yii::app()->createAbsoluteUrl('weChat/luckDraw/winPrice',array('luckDrawId'=>$LuckDrawId))?>"); uri.querys.awardName=encodeURIComponent(core.words[this.lotteryIndex-3]); this.isClick = false; window.location.href = $.URI2URL(uri); //this.showMsg(core.words[this.lotteryIndex-3]); } }else{ if(core.words[this.lotteryIndex+7]=="谢谢参与"){ this.showMsg('非常遗憾<br /> 没有中奖'); }else{ var uri=$.URL2URI("<?php echo Yii::app()->createAbsoluteUrl('weChat/luckDraw/winPrice',array('luckDrawId'=>$LuckDrawId))?>"); uri.querys.awardName=encodeURIComponent(core.words[this.lotteryIndex+7]); this.isClick = false; window.location.href = $.URI2URL(uri) //this.showMsg(core.words[this.lotteryIndex+7]); } } return; } var nextFrame=this.curFrame+1 < this.frameLen ? this.curFrame+1 : 0 ; if(window.innerWidth>=768){ var bgTop = - nextFrame * this.height2; }else{ var bgTop = - nextFrame * this.height;// 0--9* height } $('#turnplate').css('backgroundPosition','0 ' + bgTop.toString() + 'px'); this.switchLight(); this.curFrame=nextFrame; // 0--9 之间切换 this.totalFrame++; this.freshSpeed();//速度更新 this.turnAround();//互相调用 }, freshLottery:function(){ this.isClick=true;//解锁 $('.lotteryTime').html(this.lotteryTime) }, //闪灯,切换到下一张时调用 switchLight : function() { this.lightSwitch = this.lightSwitch === 0 ? 1 : 0; if(window.innerWidth>=768){ var lightHeight = -this.lightSwitch * this.height2; }else{ var lightHeight = -this.lightSwitch * this.height; } //var lightHeight = -this.lightSwitch * this.height; $('#turnplatewrap').css('backgroundPosition','0 ' + lightHeight.toString() + 'px'); }, showMsg: function(msg){ if(typeof msg == 'string'){ $('#msg').html(msg); $('#msg').show(); clearTimeout(this.startTimer); this.startTimer=setTimeout(function(){ $('#msg').hide(); },3000); } },
} core.init(); /横竖屏时重新加载/ $(window).bind('orientationchange',function(e){
core.init(); })
</script>
试试
当然，用ps做个死的也是可以哒，哈哈
还有canvas也能做啊
这个应该是点击之后就有结果，然后看看要转多少度，再控制转速什么吧。
没做过这个，不知道你怎么做。
<p class="prizeActive-context">
</p>
<script type="text/javascript">
var core={
lotteryPrepare:function(){
},
bg : function(){
},
}
core.init();
/横竖屏时重新加载/
$(window).bind('orientationchange',function(e){
</script>