微信小程序用canvas画弧形进度条

在小程序中为我们提供了canvas画图的方法：
CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)
参数说明

number x  // 圆心的 x 坐标
number y // 圆心的 y 坐标
number r // 圆的半径
number sAngle // 起始弧度，单位弧度（在3点钟方向）
number eAngle // 终止弧度
boolean counterclockwise // 弧度的方向是否是逆时针

我们来看看弧线的坐标图

针对 arc(100, 75, 50, 0, 1.5 * Math.PI)的三个关键坐标如下：
绿色: 圆心 (100, 75)
红色: 起始弧度 (0)
蓝色: 终止弧度 (1.5 * Math.PI)

下载.png

代码实例：画圆弧型进度条

<template>
<canvas class="canvas" style="width: 300px; height: 133px;margin: 0 auto;"
 canvas-id="myCanvas" disable-scroll='true'></canvas>
</template>
<script>
progress () {
    //总弧线从0.9*PI画到0.1*PI == 216度
    // 分数所对应的度数 1000分 == 216度
    let left = this.score * (216/1000)
    // 分数对应弧度（结束点）
    let left_end = 0.9 + (0.5/90) * left
    
    const ctx = wx.createCanvasContext('myCanvas')
    // 画圆环
    ctx.beginPath()
    ctx.arc(150, 90, 75, left_end*Math.PI, 0.1 * Math.PI)
    ctx.setStrokeStyle('#288DBC') // 弧线的颜色
    ctx.setLineWidth("8") // 弧的宽度
    ctx.setLineCap("round") //线条结束端点样式 butt 平直 round 圆形 square 正方形 
    ctx.stroke()

    // 画进度条
    ctx.beginPath()
    ctx.arc(150, 90, 75, 0.9*Math.PI, left_end * Math.PI)
    ctx.setStrokeStyle('#FFF')
    ctx.setLineWidth("8")
    ctx.setLineCap("round");
    ctx.stroke()
   
    ctx.setFontSize(15)
    ctx.setFillStyle('#FFF') // 文字的颜色
    ctx.fillText(this.level_desc, 120, 60)
    ctx.setTextAlign("center");  // 字体位置
    ctx.setTextBaseline("middle");  // 文字基线

    ctx.setFontSize(50)
    ctx.setFillStyle('#FFF')
    ctx.fillText(this.score, 150, 100)
    ctx.setTextAlign("center");  // 字体位置
    ctx.draw()
  }
  </script>

效果

实例图.jpeg