vue中cavans实现圆环百分比

项目中要求画一个支持任意百分比的圆环进度条逆时针，带圆角如下

找过好几篇文章，有用原生css但是画不出来圆角，也有用svg的，但由于要兼容ie所以使用了cavans画布实现，如下

开始他是从左边中心点开始所以要让他转到上面走个-90度

结束的度数计算纯粹靠运气，没搞明白他的角度计算方式

 // 推荐率画布
    circleImg (percent) {
      console.log('执行了画布', percent)
      var _this = this
      var canvas = document.getElementById('circle')
      var ctx = canvas.getContext('2d')
      /* 开始圆环 */
      var circleObj = {
        ctx: ctx,
        /* 圆心 */
        x: 80,
        y: 78,
        /* 半径 */
        radius: 55,
        /* 环的宽度 */
        lineWidth: 12
      }
      /* 有色的圆环 */
      /* 开始的度数-从上一个结束的位置开始 */
      circleObj.startAngle = -Math.PI * 2 * 90 / 360
      /* 结束的度数 */
      if (percent == 100) {
        circleObj.endAngle = Math.PI * 2 * (100 / 100 - 0.25)
      } else {
        circleObj.endAngle = Math.PI * 2 * (100 - percent / 100 - 0.25)
      }
      var linearGradient = ctx.createLinearGradient(0, 0, 180, 0) // 创建渐变对象  渐变开始点和渐变结束点
      linearGradient.addColorStop(0, '#00DCA6') // 添加颜色点
      linearGradient.addColorStop(0.5, '#00ED97') // 添加颜色点
      linearGradient.addColorStop(1, '#00F791') // 添加颜色点
      circleObj.color = linearGradient
      _this.drawCircle(circleObj)
    },
    /* 画曲线 */
    drawCircle (circleObj) {
      var ctx = circleObj.ctx
      ctx.beginPath()
      ctx.arc(circleObj.x, circleObj.y, circleObj.radius, circleObj.startAngle, circleObj.endAngle, true)
      // 设定曲线粗细度
      ctx.lineWidth = circleObj.lineWidth
      // 给曲线着色
      ctx.strokeStyle = circleObj.color
      ctx.fillStyle = '#0000ff'
      // 连接处样式
      ctx.lineCap = 'round'
      // 阴影的x偏移
      ctx.shadowOffsetX = 0
      // 阴影的y偏移
      ctx.shadowOffsetY = 6
      // 阴影颜色
      ctx.shadowColor = 'rgba(0,204,255,0.25)'
      // 阴影的模糊半径
      ctx.shadowBlur = 16
      // 给环着色
      ctx.stroke()
      ctx.closePath()
    }