wxml：
<view class="progress">
<canvas canvas-id="canvasProgress" style="width: {
{canvasWidth}}rpx; height: {
{canvasHeitht}}rpx;"></canvas>
</view>
<view class="progress">
<canvas canvas-id="canvasProgressReal" style="width: {
{canvasWidth}}rpx; height: {
{canvasHeitht}}rpx;"></canvas>
</view>
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%;
}