canvas画圆,canvas圆环进度条效果,vue

代码如下

<template>
  <section class="container">
    <div class="canvas-box">
      <canvas id="canvas" width="200" height="200"></canvas>
      <div class="firstname">{{firstName}}</div>
    </div>
  </section>
</template>

<script>

  export default {
    name: 'process',
    components: {},
    data () {
      return {
        form: {},
        firstName: ''
      }
    },
    created () {
      let form = sessionStorage.getItem('user-form');
      if (!form) {
        this.$router.replace({name: 'yzform'})
      } else {
        this.form = JSON.parse(form)
        if (this.form.name) {
        //判断文字长度,等于4,复姓,取前两个文字
          if (/^[\u4e00-\u9fa5]{4}$/.test(this.form.name)) {
            this.firstName = this.form.name.slice(0, 2)
          } else {
            this.firstName = this.form.name.slice(0, 1)
          }
        }
      }
      ;
      this.$nextTick(() => {
        this.animationFun(0)
      })
    },
    mounted () {
      this.canvans()
    },
    methods: {
      //canvas旋转
      canvans () {
        var canvas = document.getElementById('canvas'),//获取canvas元素
          context = canvas.getContext('2d'),  //获取画图环境，指明为2d
          centerX = canvas.width / 2,   //Canvas中心点x轴坐标
          centerY = canvas.height / 2,  //Canvas中心点y轴坐标
          rad = Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度
          text = 0,
          PI = Math.PI, sR = sR || 1 / 2 * PI,
          step = (PI + (PI - sR) * 2) / 100, // 一个1%对应的弧度大小
          endRadian = sR + text * step;
        var speed = 0.8; //旋转的快慢
        //绘制旋转外圈
        function blueCircle (n) {
          context.save();
          context.strokeStyle = '#fd9957'; //设置描边样式
          var coverColor = '#fd9957';
          // context.lineWidth = 2; //设置线宽
          // context.beginPath(); //路径开始
          // context.lineCap="round";
          drawCircle(centerX, centerY, 90, PI / 2, PI / 2 + n * rad, coverColor, 2); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
          var angle = 2 * PI - endRadian + n * rad,
            xPos = -Math.cos(angle) * 90 + centerX, // 端点 圆心的x坐标
            yPos = -Math.sin(angle) * 90 + centerY; // 端点 圆心的y坐标
          drawCircle(xPos, yPos, 2, 0, 2 * PI, coverColor, 4);
        }

        //绘制底色圈
        function whiteCircle () {
          context.save();
          context.beginPath();
          context.strokeStyle = '#f8ebcd';
          context.arc(centerX, centerY, 90, 0, Math.PI * 2, false);
          context.stroke();
          context.closePath();
          context.restore();
        }
		//画圆
        function drawCircle (x, y, r, sRadian, eRadian, color, lineWidth) {
          context.beginPath();
          context.lineCap = 'round';
          context.strokeStyle = color;
          context.lineWidth = lineWidth;
          context.arc(x, y, r, sRadian, eRadian, false);
          context.stroke();
        }

        //动画循环
        (function drawFrame () {
          window.requestAnimationFrame(drawFrame, canvas);
          context.clearRect(0, 0, canvas.width, canvas.height);
          whiteCircle();
          blueCircle(speed);
          if (speed > 200) speed = 0;
          speed += 1;
        }());
      },
    }
  }
</script>

<style scoped>
  .container {
    height: 100vh;
    width: 7.50rem;
    overflow: hidden;
  }

  .canvas-box {
    margin: 2.6rem 1.95rem 0 1.95rem;
    position: relative;
  }

  .firstname {
    font-size: 1.06rem;
    font-weight: 800;
    color: rgba(255, 148, 53, 1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
  }
</style>

运行效果图