<template>
  <div class="about">
    总课程数量<input type="text" v-model="m">
    已完成数量<input type="text" v-model="n">
    <button @click="finish">确认完成</button>
    <canvas width="400px" height="250px" id="canvas"></canvas>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ctx: '',
      m: 100,
      n: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.draw(this.n, this.m)
    })
    
  },

  methods: {
    draw(n, m){
      var c = document.getElementById('canvas');
      var ctx = c.getContext("2d");
      // 每次开始画之前先清空之前的内容
      ctx.clearRect(0,0,c.width,c.height); 
      // 绘制底部的灰色园
      ctx.beginPath();
      // 灰色圆的宽度
      ctx.lineWidth = 10;
      // 灰色圆的颜色
      ctx.strokeStyle = "#ccc"
      // arc 方法 第一个参数是圆心的x轴坐标 第二个参数是圆心Y轴坐标 
      // 第三个参数是园的半径 第四个参数是 画圆时的起始位置 第五个参数是结束为止
      // 第六个参数表示方向 false表示顺时针方向画
      ctx.arc(100, 80, 60, 0, 2*Math.PI, false);
      ctx.stroke();
     
      // 绘制灰色园上的红色圆
      ctx.beginPath()
      // 红色圆的线条宽度
      ctx.lineWidth = 10;
      // 红色圆的线条颜色
      ctx.strokeStyle = 'red';
      // 设置红色环显示的角度范围为 120度到420度 共300度 用100% 表示
      // 用已经完成的课程数/总课程数乘以100% 表示课程完成的百分比
      // 我们这里用 n表示完成的课程数量 用 m表示所有的课程数量
      // 则完成n个课程表示的百分比是 
      // n/m*300 表示完成 n个课程要描绘的度数
      // Math.pI 表示 180度
      ctx.arc(100, 80, 60, 2*Math.PI/3, 2*Math.PI/3 + (Math.PI + 2*Math.PI/3) * (n/m), false)
      // 设置两端为圆角
      ctx.lineCap="round";
      ctx.stroke()

      // 插入文本
      ctx.font = "18px sans-serif"
      // 填充红色字体
      ctx.fillStyle = 'red'
      // fillText 第一个参数为填充的内容 第二个参数是填充内容的x轴位置 第三个参数是填充的内容的Y轴位置
      ctx.fillText("继续学习", 65, 70);
      // 文字间的分割线
      ctx.beginPath();
      // moveTo意思是画线的初始位置 第一个参数为x轴位置 第二个参数为Y轴位置
      ctx.moveTo(62, 80);
      // lineTo是连线到下一个位置 第一个参数是x轴的位置 第二个参数是y轴的位置
      ctx.lineTo(140, 80);
      ctx.lineWidth = 1;
      ctx.strokeStyle = "#ccc"
      ctx.stroke();

      // 第三行的文本
      ctx.font = "12px sans-serif"
      ctx.fillStyle = '#ccc'
      ctx.fillText(`已学习${this.n}/${this.m}课时`, 50, 100);
    },

    finish() {
      this.draw(this.n, this.m)
    }
  }
}
</script>
<style scoped>
  #canvas {
      background-color: #fff;
      margin: 0 auto;
  }
</style>

相关尺寸及内容请自行更改