微信小程序用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

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

效果

实例图.jpeg