php怎么實現短視頻下的圓形進度條

這篇文章主要介紹“php怎么實現短視頻下的圓形進度條”，在日常操作中，相信很多人在php怎么實現短視頻下的圓形進度條問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”php怎么實現短視頻下的圓形進度條”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

//1、封裝在utils中
//底圓條
function floorCir(obj={}){  //參數為obj對象
  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不要重復
    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();
}
/**圓形進度條封裝 */
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;  //動態生成的分數畫圓
    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;
      /**設置漸變 */
      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); //進度條寬度
      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、在應用的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樣式
/*圓環進度條文字*/
.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;
}

到此，關于“php怎么實現短視頻下的圓形進度條”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！