拿到圖的時候大致是這樣的，裏面的圓是有動態效果的，考慮到gif圖耗資源，於是想要用canvas畫出來；

仔細看圖不難發現，這個鋸齒圓類似於表盤，計算好弧度，不難實現；

因為項目現在用的框架是angular5,所以獲取元素時，要用到ElementRef;直接引用就好；

先來看下頁面：

import {Component, OnInit, ElementRef, ViewChild, OnDestroy} from "@angular/core";
export class LoginComponent implements OnInit,OnDestroy{

　　@ViewChild(‘canvas‘)  //此處不可添加任何標點符號（會報錯） =》@ViewChild
 
 把組件視圖查詢（myPredicate）的第一個結果綁定到該類的 myChildComponent 屬性上。對指令無效。

　　canvas: ElementRef; //獲取dom元素
　　

　　arcTimeTicket；

　　ngOnInit(): void { 

　　　　this.drawArc();

　　}

　　ngOnDestroy(): void { //angular是單頁面，這是表示每次銷毀指令 
　　　　if(this.arcTimeTicket){ //頁面銷毀時清空
 　　　　 cancelAnimationFrame(this.arcTimeTicket);
　　　　}
　　}
　　drawArc () {
　　　　let canvas = this.canvas.
 
nativeElement;//獲取到具體元素
　　　　let context = canvas.getContext(‘2d‘); //獲取canvas中的畫圖環境 上下文
　　　　/**
　　　　　　一般情況下 canvas在項目中肯定是要動態繪畫的，也就是它的寬度和高度需要動態設置，用js的setAttribute就好
        
　　　　**/
　　　　let width = canvas.width;//獲取寬度

　　　　let height = canvas.height;//獲取高度

　　　　let clockDimensions = width / 2;//圓大小：初始值設置

　　　　context.clearRect(0,0,width,height);//清理當前畫布，以便後期繪制

　　　　context.beginPath(); //開啟新路徑

　　　　const piece = 180; //這是圓的鋸齒具體條數 目測ui給的是180條 

　　　　let index = 0;
　　　　
　　　　const draw = () => {

　　　　　　context.save();
 
 //用來保存Canvas的狀態

      　　 context.beginPath();//開始繪畫

       　　context.lineWidth = 2;//鋸齒的粗細

       　　context.strokeStyle = "rgba(0,192,255,0.65)";//鋸齒的顏色

       　　context.translate(width / 2, height / 2); //旋轉角度

       　　context.rotate(Math.PI * 2 / piece * (index + 45)); //繪制環境旋轉方法,以（0,0）為參考點進行旋轉

       　　context.moveTo(0, clockDimensions - clockDimensions / 20);//起始點

       　　context.lineTo(0, clockDimensions - clockDimensions / 9);//結束點

       　　context.stroke();//描邊

       　　context.restore();//用來恢復Canvas之前保存的狀態

       　　index++;

       　　if (index < piece) { //如果小於的話  表示就是頁面初始化  就加上這個動畫  類似於loading

         　　this.arcTimeTicket = requestAnimationFrame(draw);//此函數如有不理解 可去百度查

       　　}

　　　　};

　　　　cancelAnimationFrame(this.arcTimeTicket); //清空 這一步很重要  window。resize時 可以清空 不會導致頁面錯亂

　　　　draw();//執行繪畫

　　}

}
每天記錄一點點，希望早日成為大牛，O(∩_∩)O哈哈~

canvas畫圓類似於鋸齒指針 angular5