php怎么實(shí)現(xiàn)短視頻下的圓形進(jìn)度條

這篇文章主要介紹“php怎么實(shí)現(xiàn)短視頻下的圓形進(jìn)度條”，在日常操作中，相信很多人在php怎么實(shí)現(xiàn)短視頻下的圓形進(jìn)度條問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”php怎么實(shí)現(xiàn)短視頻下的圓形進(jìn)度條”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

//1、封裝在utils中
//底圓條
function floorCir(obj={}){  //參數(shù)為obj對(duì)象
  let id=obj.id?obj.id:null;
  let x = obj.x?obj.x:null;
  let y = obj.y?obj.y:null;
  let radius = obj.radius?obj.radius:null;
  var cxt_arc = wx.createCanvasContext(id);  //尋找id---注意id不要重復(fù)
    cxt_arc.setLineWidth(6);
    cxt_arc.setStrokeStyle('#ECECEC');
    cxt_arc.setLineCap('round');
    cxt_arc.beginPath();
    cxt_arc.arc(x, y, radius, 0, 2 * Math.PI, false);
    cxt_arc.stroke();
    cxt_arc.draw();
}
/**圓形進(jìn)度條封裝 */
function drawCircle(obj={}){
  let evl = obj.evl?obj.evl:null;
  let id = obj.id?obj.id:null;
  let x = obj.x?obj.x:null;
  let y=obj.y?obj.y:null;
  let radius=obj.radius?obj.radius:null;
  var crore=evl;  //動(dòng)態(tài)生成的分?jǐn)?shù)畫圓
    let ctx = wx.createCanvasContext(id,this)  //一定加this
    if(varName){
      clearInterval(varName);
      varName = null;
    }
    function drawArc(s, e) {
      // console.log(s);
      ctx.setFillStyle('white');
      ctx.clearRect(0, 0, 120, 120);
      ctx.draw();
      // var x = 60, y = 60, radius = 50;
      /**設(shè)置漸變 */
      var gradient = ctx.createLinearGradient(200, 100, 100, 200);
      gradient.addColorStop("0", "#7CF8BA"); 
      gradient.addColorStop("0.7", "#35B3FF");
      gradient.addColorStop("1.0", "#7CF8BA");
      ctx.setLineWidth(6); //進(jìn)度條寬度
      ctx.setStrokeStyle(gradient);
      ctx.setLineCap('round');
      ctx.beginPath();
      ctx.arc(x, y, radius, s, e, false);
      ctx.stroke()
      ctx.draw()
    }
    var step = 1, startAngle = 1.5 * Math.PI, endAngle = 0;
    var animation_interval = 60, n = crore;
    var animation = function () {
      if (step <= n) {
        endAngle = step * 2 * Math.PI / 100 + 1.5 * Math.PI;
        drawArc(startAngle, endAngle);
        step++;
      } else {
        if(varName){
          clearInterval(varName);
          varName = null
        }
      }
    };
    let varName = setInterval(animation, animation_interval);
}
//2、在應(yīng)用的js中引入utils
   import {drawCircle,floorCir} from '/utils/util'
   //在onLoad中加入
   let tmpObj = {};
   tmpObj.evl = score;
   tmpObj.x = 60;
   tmpObj.y = 60;
   tmpObj.radius = 50;
   tmpObj.id = 'canvasArcCir';
   drawCircle(tmpObj);
//3、在onReady中描繪底圓
onReady: function () {
  let tmObj={};
  tmObj.x = 60;
  tmObj.y = 60;
  tmObj.radius = 50;
  tmObj.id = 'canvasCircle';
    floorCir(tmObj)
  }，
//4、在wxml中
<view class="circle-box">
    <canvas class="circle" style=" width:120px; height:120px;" canvas-id="canvasCircle"></canvas>
    <canvas class="circle" style="width:120px; height:120px;" canvas-id="canvasArcCir"></canvas>
    <view class="draw_btn" bindtap="drawCircle"><text class="score">{{list.fraction}}</text>分</view>
</view>
//5、css樣式
/*圓環(huán)進(jìn)度條文字*/
.circle_info{
  position: absolute; 
  width: 100%;
  left: 50%;
  top: 50%; 
  transform: translate(-50%,-50%); 
  display: flex;  
  align-items: center;
  justify-content: center
}
.circle_dot{
  width:16rpx;
  height: 16rpx;  
  border-radius: 50%;
  background-color: #fb9126;
} 
.circle_txt{
  padding-left: 10rpx;
  color: #fff;
  font-size: 36rpx; 
  letter-spacing: 2rpx;
}

到此，關(guān)于“php怎么實(shí)現(xiàn)短視頻下的圓形進(jìn)度條”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！