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怎么实现短视频下的圆形进度条”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！