vue-canvas基本使用和注意事项-动画闪烁效果-自适应适配不同分辨率问题

前言

  • canvas画布是html的新特性,熟悉画布我们可以完成很多拖拽,标注,动画的功能

  • 使用canvas实现一个小例子很容易,但是真正在项目中使用时,我们需要注意的地方有很多

  • canvas基本原理就是它基于渲染方法,根据画布相对的x,y坐标,长,宽,来渲染画布效果

  • 熟练使用之间我们肯定是需要连接基本使用和相关注意事项,才能在遇到问题时快速解决

canvas基本使用-生成画布-.vue页面

1.先在html中写一个canvas标签

2.通过id或者ref找到canvas标签生成画布

// 书写canvas标签

// 找到画布标签
this.canvas = this.$refs.canvas;
// 设置画布宽高
this.canvas.width = 500;
this.canvas.height = 200;
// 生成画布
this.ctx = this.canvas.getContext("2d");

canvas基本使用-渲染文字



  
    
    
    canvas-渲染文字
  
  
    
    

canvas基本使用-渲染圆-填充颜色



  
    
    
    用canvas画一个圆
  
  
    
    

canvas基本使用-动画-圆形闪烁效果动画



  
    
    
    用canvas画一个圆-闪动
  
  
    
    
    

canvas基本使用-图片层级问题



  
    
    
    用canvas图片层级问题
  
  
    
    
    

canvas基本使用-文字-形状层级问题



  
    
    
    canvas-园-文字层级问题
  
  
    
    
    

canvas注意事项-白屏现象-渲染问题-解决方案主页文章有

  • canvas标签渲染是有一个方法的,但我们每次修改完,执行渲染时就会出现白屏一闪而过的现象

  • 渲染再快也是需要时间的,可以借助动画和视频的帧数来解决这个问题,帧数越快肉眼是很难看出来

  • 意思是我们需要把渲染方法,背景图,图标都封装方法,写一个定时器来控制帧数,一直渲染

  • 优点不会出现白屏现象,只需要更改背景数据和图标数据就可以实现画布的无感刷新,察觉不出来

  • 缺点因为使用定时器,在画布销毁时要处理定时器,因为是定时器长时间在这个页面会出现图标闪烁

canvas注意事项-自适应布局-适配不同分辨率

  • 一直以来功能可以实现,适配问题一直是很头痛的问题,因为我们无法控制用户电脑型号

  • canvas适配需要注意2点,控制画布长宽不要超出页面布局,控制页面上数据等比例缩放

  • canvas大多数文章都是把长宽直接写在标签上,data里面,或者在methed方法中直接赋值

  • 这样我们在当前页面是好的,当换成老屏幕,笔记本,mac这个画布就会马上变形,影响使用

代码实现-比如当前页面画布1000*500

1.先对项目进行整体适配-主页文章有pc端适配不同分辨率设备

缺点:行内样式不能生效(写在标签上的宽高也不会生效)

2.所以我们需要在画布标签外面套一层div设置成1000*500,当分辨率发生变化-我们做了整体适配-外层div样式在style中也会跟着适配改变成当前视口长宽-在画布生成之前获取外层div的长宽赋值给画布-这样不管分辨率怎么变外层div都会跟着变,画布长宽也会跟着变,就达到了自适应的效果

2.1画布标签

           

2.2style样式

 #canvas-item {
        width: 1000px;
        height: 500px;
        // 画布
        canvas {
          width: 100%;
          height: 100%;
        }
      }

2.3在生成画布之前获取外层div大小赋值给画布

      
// 通过id找到canvas标签外层div标签
      let canvasfa = document.getElementById("canvas-item");
      // 获取外层div长宽-除了这种方式其他都获取不到-费老大劲
      let x = window.getComputedStyle(canvasfa).getPropertyValue("width");
      let y = window.getComputedStyle(canvasfa).getPropertyValue("height");
      // 截取结果-去除最后2位单位'px'
      let wx = Number(x.slice(0, -2));
      let wy = Number(y.slice(0, -2));
      // 这是重要判断依据-根据长宽范围判断在什么设备-针对性对画布上数据进行处理
      console.log("长宽", wx, wy);
      // 找到画布标签
      this.canvas = this.$refs.canvas;
      // 设置画布宽高-遮掩画布的长宽就写活了-自适应适配-不会破坏布局
      this.canvas.width = wx;
      this.canvas.height = wy;
      // 生成画布
      this.ctx = this.canvas.getContext("2d");

2.4根据不同分辨率设备的长宽范围值当判断条件-对画布上的数据进行适配

注意:判断条件长宽尽量不要用 == 使用<= >= 比较合理(避免某些分辨率照顾不到)

canvas注意实现-自己理解

  • canvas这个技术可以实现很多功能,电子签名,点位标注拖拽,动画,画板等等

  • 了解这些基本知识,基本使用,注意事项,在能在构建功能的时候有思路,辨别文章真假能力

  • 实际开发肯定会有各种问题,但是慢慢解决这些问题也是一种进步。你遇到问题别人也遇到过,肯定能解决

  • AntV 也可以实现canvas的相似功能,但每一项技术它都有优缺点,多一个总比没有好,加油!!!


总结:

经过这一趟流程下来相信你也对 vue-canvas基本使用和注意事项-动画闪烁效果-自适应适配不同分辨率问题 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

什么不足的地方请大家指出谢谢 -- 風过无痕

你可能感兴趣的:(实际开发-问题解决,canvas-画布,vue.js,canvas画布标签,canvas画布自适应适配,canvas画布闪烁效果,canvas画布层级问题,canvas画布基本使用,canvas画布白屏现象优化)