• 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哈哈~

  • 相关阅读:
    【Vue教程系列:第一篇】Win7 搭建Vue开发环境
    MVC 之 WebAPI 系列二
    MVC 之 WebAPI 系列一
    Javascript 截取2位小数
    Javascript 处理时间大全
    SpringBoot是如何动起来的?
    超全、超详的Spring Boot配置讲解笔记
    Java数据结构-ArrayList最细致的解析笔记
    Redis 到底是怎么实现“附近的人”这个功能的?
    02--Java Jshell的使用 最适合入门的Java教程
  • 原文地址:https://www.cnblogs.com/fmixue/p/8510876.html
Copyright © 2020-2023  润新知