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