您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章给大家介绍小程序开发中如何如何实现自定义进度条,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
具体内容如下
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 #000 solid; border-radius: 5vw; }
circle.wxml:
<view class="wrap"> <view class="circle-box"> <canvas class="circle" canvas-id="canvasCircle"> </canvas> <canvas class="circle" canvas-id="canvasArcCir"> </canvas> <view class="draw_btn"> <view>80分</view> <view>(满分100分)</view> </view> </view> </view>
circle.js:
// pages/circle/circle.js //获取应用实例 const app = getApp() var ctx = wx.createCanvasContext('canvasArcCir'); Page({ /** * 页面的初始数据 */ data: { }, drawCircle: function() { function drawArc(s, e) { ctx.setFillStyle('white'); ctx.clearRect(0, 0, 200, 200); ctx.draw(); var x = 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() } var step = 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对象。 var cxt_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(); }, })
关于小程序开发中如何如何实现自定义进度条就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。