详解微信小程序——自定义圆形进度条

发布时间：2020-12-14 20:23:28 所属栏目：资源来源：网络整理

导读：微信小程序自定义圆形进度条，具体如下：无图无真相，先上图：实现思路，先绘制底层的灰色圆圈背景，再绘制上层的蓝色进度条。代码实现： JS代码： // 页面渲染完成 var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对

微信小程序自定义圆形进度条，具体如下：

无图无真相，先上图：

实现思路，先绘制底层的灰色圆圈背景，再绘制上层的蓝色进度条。

代码实现：

JS代码：

// 页面渲染完成
var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#d2d2d2');
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//开始一个新的路径
cxt_arc.arc(106,106,100,2*Math.PI,false);//设置一个原点(106,106)，半径为100的圆的路径到当前路径
cxt_arc.stroke();//对当前路径进行描边

cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#3ea6ff');
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//开始一个新的路径
cxt_arc.arc(106,-Math.PI 1 / 2,Math.PI6/5,false);
cxt_arc.stroke();//对当前路径进行描边

cxt_arc.draw();

},onShow: function () {
// 页面显示
},onHide: function () {
// 页面隐藏
},onUnload: function () {
// 页面关闭
}
})

页面布局：

<view class="cc">中间

CSS样式：

}

.top{
text-align: center
}

.cc{

margin-top: -120px;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!