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
| <template>
| <canvas :id="id" :width="centerPosition*2" :height="centerPosition*2"></canvas>
| </template>
|
| <script>
| export default {
| name: 'vueName',
| props: {
| size: [String, Number],
| lineWidth: [String, Number],
| color: String,
| progress: [String, Number],
| centerPosition: [String, Number],
| id: {
| type: String,
| default: () => 'canvas'
| },
|
| },
| data () {
| return {
| currentDeg: 0, // 度从0开始
| }
| },
| mounted() {
| this.init()
| },
| watch: {
| progress(val, oldVal){
| if(val != oldVal) {
| this.init();
| }
|
| }
| },
| methods: {
| init() {
| this.currentDeg = 0;
| const can = document.getElementById(this.id);
| const van = can.getContext('2d');
| // 清空画布，重绘
| van.setTransform(1, 0, 0, 1, 0, 0);
| van.clearRect(0,0,can.width,can.height);
| // 先绘制背景，这里只绘制一次，跟水平进度条不一样呢
| this.drawCircle(van);
| this.drawArc(this.currentDeg++, van);
| },
| drawArc(deg, van) {
| // 计算deg次时的开始角度
| let from = (Math.PI/180)*deg;
| // 计算deg次时的结束角度
| let to = (Math.PI/180)*deg + Math.PI/180;
| van.beginPath();
| van.lineWidth = this.lineWidth;
| // 设置线头的样式为圆头，默认是方形(不圆润)
| van.lineCap = 'round';
| van.strokeStyle = this.color;
| van.arc(this.centerPosition,this.centerPosition,this.size/2,from,to,false);
| // 清空画布上的文字，这里不是清除整个画布哦
| van.clearRect(180,180,50,50);
| van.font = '18px serif';
| let text = (this.currentDeg / 360 * 100).toFixed(0) + '%';
| van.fillText(text,190,200);
| van.stroke();
| van.closePath()
| if(this.currentDeg <= this.progress*360/100){
| setTimeout(() => {
| this.drawArc(this.currentDeg++, van);
| },10)
| }
| },
| drawCircle(van) {
| van.beginPath();
| van.lineWidth = this.lineWidth;
| van.strokeStyle = 'rgba(115,172,230,0.15)';
| van.arc(this.centerPosition,this.centerPosition,this.size/2,0,Math.PI*2,false);
| van.stroke();
| van.closePath()
| }
|
| },
| destroyed() {
| }
| }
| </script>
|
| <style lang="less">
| .c-progress-circle {
|
| }
|
| </style>
|
|
