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