拿到图的时候大致是这样的,里面的圆是有动态效果的,考虑到gif图耗资源,于是想要用canvas画出来;

canvas画圆类似于锯齿指针 angular5-LMLPHP

仔细看图不难发现,这个锯齿圆类似于表盘,计算好弧度,不难实现;

因为项目现在用的框架是angular5,所以获取元素时,要用到ElementRef;直接引用就好;

先来看下页面:

canvas画圆类似于锯齿指针 angular5-LMLPHP

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就好
canvas画圆类似于锯齿指针 angular5-LMLPHP
    **/
    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哈哈~
05-08 08:25