小程序实现圆形进度条

jia_jia520

于 2019-10-08 16:48:00 发布

阅读量745

点赞数

CC 4.0 BY-SA版权

文章标签：小程序进度条、动态、圆形

本文链接：https://blog.csdn.net/jia_jia520/article/details/102394143

本文将介绍如何在小程序中创建动态的圆形进度条。通过详细的步骤和代码示例，展示从设计到实现的全过程，帮助开发者理解并掌握这一功能的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序实现圆形进度条

//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