小程序自定义圆形进度条
本文实例为大家分享了小程序自定义圆形进度条的具体代码,供大家参考,具体内容如下
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(); }, })
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。