环形进度条

<template>
  <canvas class="pie" id="pieRatio"></canvas>
</template>

<script>
  export default {
    data() {
      return {
        baseRem: .337,
        endPortrait: 0.77, //终止比例
      }
    },
    mounted(){
      let canvas = document.getElementById('pieRatio');
      let context = canvas.getContext('2d');
      let baseFont = document.querySelector('html').style['fontSize'].slice(0,-2);
      let baseSize = baseFont * this.baseRem;
      let getPixelRatio = function(context) {
            var backingStore = context.backingStorePixelRatio ||  context.webkitBackingStorePixelRatio || 1;
            return (window.devicePixelRatio || 1) / backingStore;
      };
      let ratio = getPixelRatio(context);

      canvas.width = baseSize * ratio;
      canvas.height = baseSize * ratio;
      let centerX = canvas.width/2,   //Canvas中心点x轴坐标
        centerY = canvas.height/2,  //Canvas中心点y轴坐标
        radius = baseSize * ratio/ 2,
        minradius = (baseSize-4) * ratio/ 2,
        rad = Math.PI*2/radius;

      let startArc = Math.PI/2;
      let progressAngle = (65)* Math.PI * 2/100;

      //画灰色图
      context.beginPath();
      context.moveTo(centerX,centerY);
      context.arc(centerX,centerY, radius, 0, Math.PI * 2, false);
      context.closePath();
      context.fillStyle = '#ddd';
      context.fill();

      //画比例
      context.beginPath();
      context.moveTo(centerX,centerY);
      context.arc(centerX,centerY, radius, -startArc, progressAngle-startArc , false);
      context.closePath();
      context.fillStyle = '#ff0000';
      context.fill();

      //画内部白色
      context.beginPath();
      context.moveTo(centerX,centerY);
      context.arc(centerX,centerY, minradius, 0, Math.PI * 2, true);
      context.closePath();
      context.fillStyle = 'rgba(255,255,255,1)';
      context.fill();

      //写文案
      context.font = ".20rem bold ";
      context.fillStyle = '#ff0000';
      context.textAlign = 'center';
      context.textBaseline = 'bottom';
      context.moveTo(centerX,centerY);
      context.fillText('65%', centerX,centerY);

      context.font = ".12rem bold";
      context.fillStyle = '#585c64';
      context.textAlign = 'center';
      context.textBaseline = 'bottom';
      context.moveTo(centerX,centerY);
      context.fillText('已购', centerX,centerY+20);
    }
  }
</script>

<style lang="less" scoped>
  /*.pie{
      height: 5.08rem;
  }*/
</style>