Angular-canvas實現圓角圓環

1、示例圖

 

 

 

 

 

 

 

2、實現步驟

　　html:　　

1 <canvas #canvasDom width="{{width}}" height="{{height}}" #canvas>
2     您的瀏覽器不支持畫布
3 </canvas>

　　1.設置背景圓環

　　　　

 1 // 背景圓環
 2   drawArc() {
 3     // 設置寬高
 4     this.context = this.canvasDom.nativeElement.getContext('2d');
 5     const context = this.context;
 6     this.canvasDom.nativeElement.width = this.width;
 7     this.canvasDom.nativeElement.height = this.height;
 8     // 外層圓環
 9     context.beginPath();
10     context.strokeStyle = '#ebebeb';  // 顏色
11     context.arc(100, 100, 80, (Math.PI / 180) * 270, (Math.PI / 180) * - 90, false);
12     context.lineWidth = 20;
13     context.closePath();
14     context.stroke();
15 　　 // 設置着色圓環
16     this.frameArc();
17   }

 

　　2.設置內層圓環-運動效果

 1 // 動態圓環
 2   frameArc() {
 3     const speed = 20; // 速度
 4     let stepDeg = 0;  // 初始值
 5 
 6     let timer = setInterval(() => {
 7       stepDeg += 1; // 以1爲間距
 8       // 若當前數值已大於傳入數值，則清除定時器
 9       if (stepDeg >= this.rate) {
10         clearInterval(timer);
11       }
12       // 內層圓環
13       const context = this.context;
14       context.beginPath();
15       // 設置漸變色
16       const gradient = context.createLinearGradient(0, 20, 0, 120);
17       gradient.addColorStop('0', '#ffaa03');
18       gradient.addColorStop('1.0', '#ff4514');
19       context.strokeStyle = gradient;
20       context.lineCap = 'round';  // 使其形狀爲圓弧
21       context.arc(100, 100, 80, (Math.PI / 180) * 270, (Math.PI / 180) * (270 + (stepDeg / 100 * 360)), false);
22       context.lineWidth = 20; // 圓環的寬度
23       context.stroke();
24       context.closePath();
25     }, speed);
26   }

　　3.設置文字

1 // 文字
2   drawText() {
3     const cans = this.canvasDom.nativeElement.getContext('2d');
4     cans.font = 'bold 44px Arial';  // 字體
5     cans.fillStyle = '#676767'; // 字體顏色
6     cans.textAlign = 'center';  // 使文字居中
7     cans.fillText(this.rate + '%', this.width / 2, this.height / 2 + 15);
8   }