微信小程序画布圆形进度条显示效果

微信小程序画布圆形进度条显示效果

本文实例为大家分享了微信小程序画布圆形进度条展示的具体代码，供大家参考，具体内容如下

效果图：

代码：

wxml

js

// pages/test/test.js

var context = new wx.createCanvasContext('canvasid', this);

var strat_num = 1, end_num = 20;

var sAngle = 1.5 * Math.PI, eAngle = 0;

Page({

onReady: function () {

this.canvas()

},

canvas:function(){

var that=this;

if (strat_num <= end_num){

console.log('strat_num:', strat_num)

eAngle = strat_num * 2 * Math.PI / end_num + 1.5 * Math.PI;

setTimeout(function () {

context.setStrokeStyle("#00ff00")

context.setLineWidth(2)

context.fillText(strat_num * 5 <= 100?strat_num * 5:100, 95, 95)

context.arc(100, 100, 60, sAngle, eAngle, false)

context.stroke()

conMocUrYtext.draw()

that.canvas()

strat_num++

},200)

} else {

console.log('strat_http://num_end:', strat_num)

}

}

})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。