微客导航 » 文章资讯 » 小程序自定义圆形进度条

小程序自定义圆形进度条

2023-07-11 15:14:03 358

本文实例为大家分享了小程序自定义圆形进度条的具体代码，供大家参考，具体内容如下

circle.wxss:

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#000solid;
border-radius:5vw;
}

circle.wxml:








80分
(满分100分)

circle.js:

//pages/circle/circle.js
//获取应用实例
constapp=getApp()
varctx=wx.createCanvasContext('canvasArcCir');
Page({

/**
*页面的初始数据
*/
data:{

},
drawCircle:function(){
functiondrawArc(s,e){
ctx.setFillStyle('white');
ctx.clearRect(0,0,200,200);
ctx.draw();
varx=100,
y=100,
radius=96;
ctx.setLineWidth(5);
ctx.setStrokeStyle('#d81e06');
ctx.setLineCap('round');
ctx.beginPath();
//圆心的x,y坐标,radius半径s:起始弧度，单位弧度（在3点钟方向）e:终止弧度,:false弧度的方向是否是逆时针
ctx.arc(x,y,radius,s,e,false);
ctx.stroke()
ctx.draw()
}
varstep=70,
startAngle=1.5*Math.PI,
endAngle=0,
n=100,
endAngle=step*2*Math.PI/n+1.5*Math.PI;
drawArc(startAngle,endAngle);

},
/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
//调用画圆的方法
this.drawCircle()
},
/**
*生命周期函数--监听页面初次渲染完成
*/
onReady:function(){
//创建并返回绘图上下文context对象。
varcxt_arc=wx.createCanvasContext('canvasCircle');
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#eaeaea');
cxt_arc.setLineCap('round');
cxt_arc.beginPath();
cxt_arc.arc(100,100,96,0,2*Math.PI,false);
cxt_arc.stroke();
cxt_arc.draw();
},
})

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

小程序自定义圆形进度条

热门推荐

随机推荐