微信小程序 -- canvas：实现圆形进度条

先放效果图，如下：

1. wxml文件代码如下

对于圆形进度条中间的文字，如果是简单的，可以用它自带的属性去填充。 比较复杂的，就可以像下面，通过样式将文字定位到圆形进度条中间合适位置。

<view class='circlePage'>
  <view class='wrap'>
    <!-- 圆形中间的文字 -->
    <view class="circleText">
      <text class='num'>{
  {total}}</text>
      <view class='line'></view>
      <text class="text">总数量</text>
    </view>
    <!-- 第一个canvas用于绘制白色圆形 第二个canvas用于绘制橙色圆形进度条 -->
    <canvas canvas-id='canvas' class="canvas progress"></canvas>
    <c