小程序画带圆角的圆形进度条

老的API

1. <canvas id="{{canvasId}}" canvas-id="{{canvasId}}" style="opacity: 0;" class="canvas"/>

复制代码

1. startDraw() {
2.       const { canvasId } = this.data
3.       const query = this.createSelectorQuery()
4.         query
5.         .select(`#${canvasId}`)
6.         .boundingClientRect(res => {
7.           if (res?.width) {
8.             const width = res.width
9.             const height = res.height
10.             this.data.canvasWidth = width
11.             this.data.canvasHeight = height
12.           }
13.           this.data.canvasContext = wx.createCanvasContext(canvasId, this)
14.           this.startProgress()
15.         })
16.         .exec()
17.     },
18.     startProgress() {
19.       const context = this.data.canvasContext
20.       const width = this.data.canvasWidth
21.       const height = this.data.canvasHeight
22.       // 计算百分比
23.       let  percentage = 1
24.       // 传入剩余和总数 或者传入进度 能算出百分比就行
25.       const remain = 0
26.       const total = 0
27.       const progress = total - remain
28.       if (remain && total) {
29.         percentage = progress / total
30.       }
31.       // 原点
32.       const centerX = width / 2
33.       const cenetrY = height / 2
34.       // 半径
35.       const radius = width / 2 - 12
36.       // 线条粗细
37.       const lineWidth = 10
38.       // 线条形状
39.       const lineCap = 'round'
40.       // 背景条颜色
41.       let backgroundColor = 'rgba(80, 158, 46, 0.40)'
42.       // 进度条颜色
43.       let progressColor = '#509E2E'
45.    
46.       // 背景圆环
47.       context.beginPath()
48.       context.arc(
49.         centerX,
50.         cenetrY,
51.         radius,
52.         -0.75 * Math.PI,
53.         1.5 * Math.PI,
54.         false
55.       )
56.       context.lineWidth = lineWidth
57.       context.lineCap = lineCap
58.       context.strokeStyle = backgroundColor
59.       context.stroke()
61.       // 进度圆环
62.       if (remain && total) {
63.         context.beginPath()
64.         context.arc(
65.           centerX,
66.           cenetrY,
67.           radius,
68.           -0.5 * Math.PI,
69.           (-0.5 + 2 * percentage) * Math.PI,
70.           false
71.         )
72.         context.lineWidth = lineWidth
73.         context.lineCap = lineCap
74.         context.strokeStyle = progressColor
75.         context.stroke()
76.       }
77.       context.draw()
78.     },

复制代码

2d

1.       <canvas type="2d" canvas-id="{{canvasId}}" id="{{canvasId}}" class="canvas"/>

复制代码

1. startDraw() {
2.       const { canvasId, canvasWidth, canvasHeight } = this.data
3.       const query = this.createSelectorQuery().in(this)
4.   
5.         query
6.         .select(`#${canvasId}`)
7.         .fields({ node: true, size: true })
8.         .exec(res => {
9.           const canvas = res[0].node
10.           const ctx = canvas.getContext('2d')
11.           canvas.width = canvasWidth
12.           canvas.height = canvasHeight
13.           this.data.canvasContext = ctx
14.           this.startProgress()
15.         })
16.     },
17.     startProgress() {
18.       const context = this.data.canvasContext
19.       const width = this.data.canvasWidth
20.       const height = this.data.canvasHeight
21.       context.clearRect(0, 0, width, height)
22.       // 计算百分比
23.       let  percentage = 1
24.       // 设置剩余和总数
25.       const remain = 50
26.       const total = 100
27.       const progress = total - remain
28.       if (remain && total) {
29.         percentage = progress / total
30.       }
31.       // 原点
32.       const centerX = width / 2
33.       const cenetrY = height / 2
34.       // 半径
35.       const radius = width / 2 - 12
36.       // 线条粗细
37.       const lineWidth = 14
38.       // 线条形状
39.       const lineCap = 'round'
40.       // 背景条颜色
41.       let backgroundColor = 'rgba(80, 158, 46, 0.40)'
42.       // 进度条颜色
43.       let progressColor = '#509E2E'
45.       // 异常颜色
46.       if (deviceStatus == 'OFFLINE') {
47.         backgroundColor = 'rgba(208, 2, 27, 0.40)'
48.         progressColor = '#D0021B'
49.       }
50.       // 背景圆环
51.       context.beginPath()
52.       context.arc(
53.         centerX,
54.         cenetrY,
55.         radius,
56.         -0.75 * Math.PI,
57.         1.5 * Math.PI,
58.         false
59.       )
60.       context.lineWidth = lineWidth
61.       context.lineCap = lineCap
62.       context.strokeStyle = backgroundColor
63.       context.stroke()
65.       // 进度圆环
66.       if (remain && total) {
67.         context.beginPath()
68.         context.arc(
69.           centerX,
70.           cenetrY,
71.           radius,
72.           -0.5 * Math.PI,
73.           (-0.5 + 2 * percentage) * Math.PI,
74.           false
75.         )
76.         context.lineWidth = lineWidth
77.         context.lineCap = lineCap
78.         context.strokeStyle = progressColor
79.         context.stroke()
80.       }
81.     },

复制代码

this.createSelectorQuery().in(this)要在ready之后调用哦
css

1. .canvas {
2.         height: 340rpx;
3.         width: 340rpx;
4.    
5.       }

复制代码

老api js里宽高的设置的是170
2d里宽高设置的是340


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。