javascript - 需要在一个圆形图片上，等比例划分几个区域，然后在各个区域上添加文字

Question

现在后端是传来这个圆盘的背景图片和 上面各个奖项的文字，然后我们前端需要把文字都放在这个圆盘上，请问哪位大虾可以告诉我怎么实现吗

Answer 1

试试

transform: rotate(angle)

当然，用ps做个死的也是可以哒，哈哈

还有canvas也能做啊

这个应该是点击之后就有结果，然后看看要转多少度，再控制转速什么吧。

没做过这个，不知道你怎么做。

Answer 2

<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">
        剩余&nbsp; <span class="lotteryTime">0</span>&nbsp;次
    </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>