圆环进度条 两种实现方式

先看图效果图：

这边UI的 设计图 长这样

第一种实现方式 

第二种实现方式

完整代码：

<template>
  <view class="process">

    <canvas class="canvas-content" :canvas-id="canvasId" :id="canvasId">
    </canvas>

    <view class="box0-parent">
      <view class="box0" :style="box0Style">
      </view>
    </view>
    <view class="box1-parent">
      <view class="box1" :style="box1Style">
      </view>
    </view>
    <view class="input-range">
      <text> {{percent}}%</text> <text style="margin-left: 100rpx;">{{percent*3.6}}</text>
      <slider @changing="onChange" value="0" max="100" min="0" v-model="percent" activeColor="#FFCC33"
        backgroundColor="#000000" block-color="#8A6DE9"></slider>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        percent: 30,
        canvasId: 'canvasId',
        canvasContent: null,
        startAngle: -Math.PI / 2, //canvas画圆的起始角度，默认为3点钟方向即90度 方向，定位位到12位置 0度
      }
    },
    computed: {
      box0Style() {
        if (this.percent >= 50) {
          return `transform: rotate(${180 + this.percent*3.6}deg)`
        } else {
          return ``
        }
      },
      box1Style() {
        if (this.percent <= 50) {
          return `transform: rotate(${this.percent*3.6}deg)`
        } else {
          return `display: none;`
        }
      }
    },
    onShow() {
      this.canvasContent = uni.createCanvasContext(this.canvasId, this)
      this.drawCircleByProgress()
    },
    methods: {
      onChange(value) {
        // console.log(value.detail.value)
        this.percent = value.detail.value
        this.drawCircleByProgress()
      },
      drawCircleByProgress() {
        // 表示进度的两端为圆形  目前没有找到只设置一段的方式
        this.canvasContent.setLineCap('round'); //圆形     
        this.canvasContent.setLineCap('square'); //方形

        let width = uni.upx2px(30)

        // 设置线条的宽度和颜色
        this.canvasContent.setLineWidth(width);
        this.canvasContent.setStrokeStyle('#ff0000');

        let endAngle = ((2 * Math.PI) / 100) * this.percent + this.startAngle;

        this.canvasContent.beginPath();
        // 半径为整个canvas宽度的一半
        let radius = uni.upx2px(284) / 2;
        this.canvasContent.arc(radius, radius, radius - width, this.startAngle, endAngle, false);
        this.canvasContent.stroke();

        //原点要在 圆弧前面一点点的位置 所有这个加了 0.1；
        let p0x = radius + Math.cos(endAngle + .1) * (radius - width)
        let p0y = radius + Math.sin(endAngle + .1) * (radius - width)


        this.canvasContent.beginPath()
        this.canvasContent.arc(p0x, p0y, width / 2, 0, 2 * Math.PI)
        this.canvasContent.setFillStyle('#F0AD4E');
        this.canvasContent.fill()

        this.canvasContent.beginPath()
        this.canvasContent.arc(p0x, p0y, width * 0.4, 0, 2 * Math.PI)
        this.canvasContent.setFillStyle('#FFFFFF');
        this.canvasContent.fill()

        this.canvasContent.draw();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .process {
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .canvas-content {
      width: 284rpx;
      height: 284rpx;
      background-color: #059cdd;
    }

    .input-range {
      position: absolute;
      top: 750rpx;
      width: 300rpx;
    }

    .box0-parent {
      position: absolute;
      top: 380rpx;
      width: 284rpx;
      height: 284rpx;
      background-color: #dd2124;
      clip: rect(0px, 142rpx, 284rpx, 0px);

      // border-radius: 50%;
      .box0 {
        position: absolute;
        top: 0;
        width: 284rpx;
        height: 284rpx;
        //background-color: #2C405A;
        background-color: #2168F9;
        clip: rect(0px, 142rpx, 284rpx, 0px);
        border-radius: 50%;
      }
    }

    .box1-parent {
      position: absolute;
      top: 380rpx;
      width: 284rpx;
      height: 284rpx;
      //background-color: #c34c24;
      background-color: #dd2124;
      // background-color: #2168F9;
      clip: rect(0px, 284rpx, 284rpx, 142rpx);

      // border-radius: 50%;
      .box1 {
        position: absolute;
        top: 0;
        width: 284rpx;
        height: 284rpx;
        // background-color: #5a4600;
        background-color: #2168F9;
        clip: rect(0px, 284rpx, 284rpx, 142rpx);
        border-radius: 50%;
        // transform: rotate(60deg);
      }
    }

  }
</style>