本文实例为大家分享了微信小程序绘制半圆进度条的具体代码，供大家参考，具体内容如下
wxml：
js：
Page({
data: {
canvasWidth: 500,
canvasHeitht: 300,
radioPos: 98,
footNum: 0,
footNumAll: 6000,
myTargetFoot: 10000,
degree: 195,
timer: '',
timerNum: '',
},
onLoad: function(options) {
var that = this;
let widthPX = wx.getSystemInfoSync().windowWidth;
let r = this.data.radioPos = widthPX * (500 / 750) * (300 / 365) * (2 / 4)
var context = wx.createCanvasContext('canvasProgress')
context.translate(24, 6);
context.setStrokeStyle("#fff");
context.setLineWidth(2);
context.beginPath();
for (let i = 195; i >= -15; i--) { //每1度绘制一条线
let degree = i / 360 * Math.PI * 2
let radio = r * 0.92 - r * 0.005 * (210 - i) / 240
context.moveTo(r + radio * Math.cos(degree), r - radio * Math.sin(degree)); //向量加减
context.lineTo(r + r * Math.cos(degree), r - r * Math.sin(degree)); //向量加减
context.stroke();
}
context.draw();
},
onReady: function() {
},
onShow: function() {
let that = this
//清理
var context = wx.createCanvasContext('canvasProgressReal')
context.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeitht)
context.draw({
reserve: true
})
that.walkAction()
},
onHide: function() {
},
onUnload: function() {
},
onPullDownRefresh: function() {
},
onReachBottom: function() {
},
onShareAppMessage: function() {
},
walkAction: function() {
console.log('walk')
this.setData({
degree: 195
})
let that = this
let r = this.data.radioPos
let widthPX = wx.getSystemInfoSync().windowWidth;
var context = wx.createCanvasContext('canvasProgressReal')
context.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeitht)
context.setStrokeStyle("#FDD08F");
context.translate(24, 6);
context.setLineWidth(2);
let degreeMax = 195 - (this.data.footNumAll / this.data.myTargetFoot) * 240;
if (Number.parseInt(this.data.footNumAll) >= Number.parseInt(this.data.myTargetFoot)) {
console.log('footNumAll is smaller than myTargetFoot')
degreeMax = -33
}
this.timer = setInterval(() => {
if (that.data.degree > degreeMax) {
context.beginPath();
let degreeOne = that.data.degree / 360 * Math.PI * 2
let radio = r * 0.92 - r * 0.005 * (195 - that.data.degree) / 240
context.moveTo(r + radio * Math.cos(degreeOne), r - radio * Math.sin(degreeOne));
context.lineTo(r + r * Math.cos(degreeOne), r - r * Math.sin(degreeOne));
context.stroke();
// context.draw({
// reserve: true
// })//这个方法真机上绘制有问题
wx.drawCanvas({
canvasId: 'canvasProgressReal',
actions: context.getActions(),
reserve: true
})
// that.data.degree -= 3;
that.data.degree--;
} else {
clearInterval(that.timer)
}
// }, 50)
}, 10)
let tempTimes = 0;
let times = (this.data.footNumAll / this.data.myTargetFoot) * 240 / 3;
if (Number.parseInt(this.data.footNumAll) >= Number.parseInt(this.data.myTargetFoot)) {
times = 80
}
let step = this.data.footNumAll / times
this.timerNum = setInterval(() => {
if (tempTimes < times) {
that.setData({
footNum: Math.floor(that.data.footNum + step)
})
tempTimes += 1;
} else {
that.setData({
footNum: that.data.footNumAll
})
clearInterval(that.timerNum)
}
// }, 50)
}, 10)
},
})
wxss：
.progress {
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: flex !important;
align-items: center;
justify-content: center;
}
.progress canvas {
width: 100%;
height: 100%;
}
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
