微信小程序绘制半圆（弧形）进度条

2023-07-11 14:41:03 176
本文实例为大家分享了微信小程序绘制半圆进度条的具体代码，供大家参考，具体内容如下
wxml：
js：
Page({

/**
*页面的初始数据
*/
data:{
canvasWidth:500,
canvasHeitht:300,
radioPos:98,
footNum:0,
footNumAll:6000,
myTargetFoot:10000,
degree:195,
timer:'',
timerNum:'',
},

/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
varthat=this;
letwidthPX=wx.getSystemInfoSync().windowWidth;
letr=this.data.radioPos=widthPX*(500/750)*(300/365)*(2/4)
varcontext=wx.createCanvasContext('canvasProgress')
context.translate(24,6);
context.setStrokeStyle("#fff");
context.setLineWidth(2);
context.beginPath();
for(leti=195;i>=-15;i--){//每1度绘制一条线
letdegree=i/360*Math.PI*2
letradio=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(){
letthat=this
//清理
varcontext=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
})
letthat=this
letr=this.data.radioPos
letwidthPX=wx.getSystemInfoSync().windowWidth;
varcontext=wx.createCanvasContext('canvasProgressReal')
context.clearRect(0,0,this.data.canvasWidth,this.data.canvasHeitht)
context.setStrokeStyle("#FDD08F");
context.translate(24,6);
context.setLineWidth(2);
letdegreeMax=195-(this.data.footNumAll/this.data.myTargetFoot)*240;
if(Number.parseInt(this.data.footNumAll)>=Number.parseInt(this.data.myTargetFoot)){
console.log('footNumAllissmallerthanmyTargetFoot')
degreeMax=-33
}
this.timer=setInterval(()=>{
if(that.data.degree>degreeMax){
context.beginPath();
letdegreeOne=that.data.degree/360*Math.PI*2
letradio=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)
lettempTimes=0;
lettimes=(this.data.footNumAll/this.data.myTargetFoot)*240/3;
if(Number.parseInt(this.data.footNumAll)>=Number.parseInt(this.data.myTargetFoot)){
times=80
}
letstep=this.data.footNumAll/times
this.timerNum=setInterval(()=>{
if(tempTimes
wxss：
.progress{
z-index:1;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
display:flex!important;
align-items:center;
justify-content:center;
}

.progresscanvas{
width:100%;
height:100%;
}
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
微信小程序绘制半圆（弧形）进度条

热门推荐

随机推荐
