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

老的API

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

startDraw() {const { canvasId } = this.dataconst query = this.createSelectorQuery()query.select(`#${canvasId}`).boundingClientRect(res => {if (res?.width) {const width = res.widthconst height = res.heightthis.data.canvasWidth = widththis.data.canvasHeight = height}this.data.canvasContext = wx.createCanvasContext(canvasId, this)this.startProgress()}).exec()},startProgress() {const context = this.data.canvasContextconst width = this.data.canvasWidthconst height = this.data.canvasHeight// 计算百分比let  percentage = 1// 传入剩余和总数 或者传入进度 能算出百分比就行const remain = 0const total = 0const progress = total - remainif (remain && total) {percentage = progress / total}// 原点const centerX = width / 2const cenetrY = height / 2// 半径const radius = width / 2 - 12// 线条粗细const lineWidth = 10// 线条形状const lineCap = 'round'// 背景条颜色let backgroundColor = 'rgba(80, 158, 46, 0.40)'// 进度条颜色let progressColor = '#509E2E'// 背景圆环context.beginPath()context.arc(centerX,cenetrY,radius,-0.75 * Math.PI,1.5 * Math.PI,false)context.lineWidth = lineWidthcontext.lineCap = lineCapcontext.strokeStyle = backgroundColorcontext.stroke()// 进度圆环if (remain && total) {context.beginPath()context.arc(centerX,cenetrY,radius,-0.5 * Math.PI,(-0.5 + 2 * percentage) * Math.PI,false)context.lineWidth = lineWidthcontext.lineCap = lineCapcontext.strokeStyle = progressColorcontext.stroke()}context.draw()},

2d

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

startDraw() {const { canvasId, canvasWidth, canvasHeight } = this.dataconst query = this.createSelectorQuery().in(this)query.select(`#${canvasId}`).fields({ node: true, size: true }).exec(res => {const canvas = res[0].nodeconst ctx = canvas.getContext('2d')canvas.width = canvasWidthcanvas.height = canvasHeightthis.data.canvasContext = ctxthis.startProgress()})},startProgress() {const context = this.data.canvasContextconst width = this.data.canvasWidthconst height = this.data.canvasHeightcontext.clearRect(0, 0, width, height)// 计算百分比let  percentage = 1// 设置剩余和总数const remain = 50const total = 100const progress = total - remainif (remain && total) {percentage = progress / total}// 原点const centerX = width / 2const cenetrY = height / 2// 半径const radius = width / 2 - 12// 线条粗细const lineWidth = 14// 线条形状const lineCap = 'round'// 背景条颜色let backgroundColor = 'rgba(80, 158, 46, 0.40)'// 进度条颜色let progressColor = '#509E2E'// 异常颜色if (deviceStatus == 'OFFLINE') {backgroundColor = 'rgba(208, 2, 27, 0.40)'progressColor = '#D0021B'}// 背景圆环context.beginPath()context.arc(centerX,cenetrY,radius,-0.75 * Math.PI,1.5 * Math.PI,false)context.lineWidth = lineWidthcontext.lineCap = lineCapcontext.strokeStyle = backgroundColorcontext.stroke()// 进度圆环if (remain && total) {context.beginPath()context.arc(centerX,cenetrY,radius,-0.5 * Math.PI,(-0.5 + 2 * percentage) * Math.PI,false)context.lineWidth = lineWidthcontext.lineCap = lineCapcontext.strokeStyle = progressColorcontext.stroke()}},

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

css

.canvas {height: 340rpx;width: 340rpx;}

老api js里宽高的设置的是170

2d里宽高设置的是340