canvas画圆,canvas圆环进度条效果,vue_vue canvas圆圈

代码如下

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

运行效果图