nsgk_mobile/src/components/circleProccess.vue

<template>
  <div class="time-graph">
    <canvas :id="id" :width="120" :height="120"></canvas>
  </div>
</template>

<script>

export default {
  name: "circleProccess",
  props:{
    ids:{
      type:Number
    },
    counts:{
      type:Number,
      default:0,
    }
  },
  data() {
    return {
      context:null,
      center_x:null,
      center_y:null,
      rad:null,
      speed:0,
      context:null,
      id:this.ids,

    };
  },
  watch: {
  },
  mounted() {
    let cc = this.counts
     if(this.counts>0&&this.counts<99){
       cc+=1
      }
    let time_canvas = document.getElementById(this.ids);
    time_canvas.width = document.documentElement.clientWidth/6;
    time_canvas.height = document.documentElement.clientWidth/6;
    if(this.counts<50){
      this.drawMain(time_canvas, cc, "#FA5353", "#eef7e4");
    }else if(this.counts<100){
      this.drawMain(time_canvas, cc, "#22B7F2", "#eef7e4");
    }else{
      this.drawMain(time_canvas, cc, "#85d824", "#eef7e4");
    }
  },
  methods: {
    drawMain(drawing_elem, percent, forecolor, bgcolor){
      this.context = drawing_elem.getContext("2d");
      this.center_x = drawing_elem.width / 2;
      this.center_y = drawing_elem.height / 2;
      this.rad = 3.1415926 * 2 / 100;
      this.speed = 0;
      if (this.speed <= percent) {
        this.run(drawing_elem, percent, forecolor, bgcolor,this.speed,percent)
      }
    },
    run(drawing_elem, percent, forecolor, bgcolor){
      while(this.speed <= percent){
        window.requestAnimationFrame(this.run);
        this.context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
        this.backgroundCircle(bgcolor);
        this.text(this.speed,forecolor);
        this.foregroundCircle(this.speed,forecolor);
        this.speed += 1;
      }
    },
    backgroundCircle(bgcolor) {
      this.context.save();
      this.context.translate(0, 0)
      this.context.setLineDash([5, 5])
      this.context.lineWidth = 5; //设置线宽
      this.context.textAlign = 'center'
      this.context.textBaseline = 'middle'
      this.context.font = '18px arial'
      this.context.strokeStyle = bgcolor;
      this.context.beginPath();
      var radius = this.center_x - this.context.lineWidth;
      // context.lineCap = "round";
      this.context.arc(this.center_x, this.center_y, radius, 0, 3.1415926 * 2, false);
      this.context.stroke();
      this.context.closePath();
      this.context.restore();

    },
    foregroundCircle(n,forecolor) {
      this.context.save();
      this.context.strokeStyle = forecolor;
      this.context.lineWidth = 5;
      this.context.setLineDash([5, 5])
      // context.lineCap = "round";
      var radius = this.center_x - this.context.lineWidth;
      this.context.beginPath();
      this.context.arc(this.center_x, this.center_y, radius, -3.1415926 / 2, -3.1415926 / 2 + n * this.rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
      this.context.stroke();
      this.context.closePath();
      this.context.restore();
    },
    text(n,forecolor) {
      this.context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
      this.context.fillStyle = forecolor;
      if(this.counts==100){
        var font_size = document.documentElement.clientWidth/15;
        this.context.font = font_size + "px arial";
        var text_width = this.context.measureText(n.toFixed(0) + "%").width;
        this.context.fillText("✔", this.center_x - text_width / 6, this.center_y + font_size / 2.5);
      }else{
        var font_size = document.documentElement.clientWidth/35;
        this.context.font = font_size + "px arial";
        var text_width = this.context.measureText(n.toFixed(0) + "%").width;
        this.context.fillText(n.toFixed(0) + "%", this.center_x - text_width / 2, this.center_y + font_size / 2.5);
      }
      this.context.restore();
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .time-graph {
  padding-top: 20px;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}

::v-deep #time-graph-canvas {
  width: 60px;
  height: 60px;
}
</style>