canvas画圆类似于锯齿指针 angular5

拿到图的时候大致是这样的，里面的圆是有动态效果的，考虑到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哈哈~