微信小程序 环形进度条_微信小程序：实时圆形进度条实现 - 搜外问答

第九程序给大家带来微信小程序：实时圆形进度条实现，希望大家在开发小程序过程中能够帮助大家解决。

废话不多说，先上一张效果图！

实现思路

建立两个canvas标签，先绘制底层的浅灰色圆圈背景，再绘制上层的红色进度条。

WXML代码

开始动态绘制

WXSS代码

特别注意：底层的canvas最好使用z-index:-99；放置于底层

page {  width: 100%;  height: 100%;  background-color: #fff;}.circle-box {  text-align: center;  margin-top: 10vw;}.circle {  position: absolute;  left: 0;  right: 0;  margin: auto;}.draw_btn {  width: 35vw;  position: absolute;  top: 33vw;  right: 0;  left: 0;  margin: auto;  border: 1px #000 solid;  border-radius: 5vw;}

JS代码

//获取应用实例var app = getApp()var interval;var varName;var ctx = wx.createCanvasContext('canvasArcCir');Page({  data: { },  drawCircle: function () {   clearInterval(varName);    function drawArc(s, e) {     ctx.setFillStyle('white');     ctx.clearRect(0, 0,