canvas 手写环形进度条

<template>
  <a-card :bordered="false">
    <a-row>
      <a-col :span="12">
        <canvas id="canvas" width="500px" height="500px">您的浏览器版本过低</canvas>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
export default {
  name: 'Canvas',
  computed: {},
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 画 环形进度条
      var canvas = document.getElementById('canvas')
      var c = canvas.getContext('2d')
      let currentDeg = 0 // 度从0开始

      // 先绘制背景，这里只绘制一次
      drawCircle()
      drawArc(currentDeg++)

      function drawArc(deg) {
        // 计算deg次时的结束角度
        const to = (Math.PI / 180) * deg
        c.beginPath()
        c.lineWidth = 14
        // 设置线头的样式为圆头，默认是方形(不圆润)
        c.lineCap = 'round'
        var g = c.createLinearGradien