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

-風过无痕2023-08-25 16:31

前言

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

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

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

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

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

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

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

javascript 复制代码 
// 书写canvas标签
<canvas ref="canvas"></canvas>
// 找到画布标签
this.canvas = this.$refs.canvas;
// 设置画布宽高
this.canvas.width = 500;
this.canvas.height = 200;
// 生成画布
this.ctx = this.canvas.getContext("2d");

canvas基本使用-渲染文字

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas-渲染文字</title>
  </head>
  <body>
    <canvas
      id="canvas_1"
      width="1000"
      height="500"
      style="box-shadow: 0px 0px 20px skyblue;"
    >
    </canvas>
  </body>
​
  <script>
    // 获取画布
    var canvas = document.getElementById('canvas_1')
    // 生成画布 - 获取实例
    var ctx = canvas.getContext('2d')
​
    // canvas-文字基本使用
    // ctx.font = '字体大小 字体样式'
    // ctx.fillStyle = '字体颜色'
    // ctx.fillText ('字体'，'画布x坐标','画布y坐标','总体字体宽度')
    // 细节-ctx.fillText字体宽度-小于实际字体总宽度时会生效，大于实际字体总宽度时，不生效-就是默认字体总宽度
​
    // 实心文字
    ctx.font = '30px Arial'
    ctx.fillText('欢迎来到canvas', 10, 50)
​
    // 空心文字
    ctx.font = '30px Arial'
    ctx.strokeText('欢迎来到canvas', 10, 100)
​
    // 有颜色实体字
    ctx.font = '30px Arial'
    ctx.fillStyle = '#1ba035'
    ctx.fillText('欢迎来到canvas', 10, 150)
​
    // 空心文字有颜色 - 没有效果
​
    // 实心文字 - 有颜色 - 总体字体宽度
    ctx.font = '30px Arial'
    ctx.fillStyle = '#1ba035'
    ctx.fillText('欢迎来到canvas', 10, 200, 100)
​
    // 空心文字 - 总体宽度500 - 超过实际字体总宽度 - 会是默认字体总宽度
    ctx.font = '30px Arial'
    ctx.strokeText('欢迎来到canvas', 10, 260, 800)
  </script>
</html>
复制代码 
​

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

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用canvas画一个圆</title>
  </head>
  <body>
    <canvas
      id="canvas_1"
      width="1000"
      height="500"
      style="box-shadow: 0px 0px 20px skyblue;"
    >
    </canvas>
  </body>
​
  <script>
    // 获取画布
    var canvas = document.getElementById('canvas_1')
    // 生成画布
    var ctx = canvas.getContext('2d')
    // 开始绘制
    ctx.beginPath()
    // 圆形坐标
    let x = 50
    let y = 50
    // arc 的意思是"弧"
    // 2*Math.PI=360度
    // ctx.arc(在画布x坐标，在画布y坐标，园半径，起始位置，结束位置)
    ctx.arc(x, y, 40, 0, 2 * Math.PI)
    // 填充颜色
    ctx.fillStyle = '#007acc'
    //开始填充
    ctx.fill()
    // 绘制线条颜色更改
    ctx.strokeStyle = 'blue'
    // 绘制线条颜色-默认黑色
    ctx.stroke()
  </script>
</html>
复制代码 
​

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

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用canvas画一个圆-闪动</title>
  </head>
  <body>
    <canvas
      id="canvas_1"
      width="1000"
      height="500"
      style="box-shadow: 0px 0px 20px skyblue;"
    >
    </canvas>
    <button></button>
  </body>
​
  <script>
    // 获取画布
    var canvas = document.getElementById('canvas_1')
    // 生成画布
    var ctx = canvas.getContext('2d')
    let maxRadius = 50
    let minRadius = 30
    let radius = 30
    let flg = 1
    let z = 1
    let color = 'red'
    let x = 100
    let y = 100
    let start = function () {
      radius += flg * z
      if (radius >= maxRadius) flg = -flg
      if (radius <= minRadius) flg = -flg
      ctx.beginPath()
      ctx.arc(x, y, radius, 0, 2 * Math.PI)
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      // ctx.clearRect(x, y, maxRadius, maxRadius);
      // 填充颜色
      ctx.fillStyle = color
      //开始填充
      ctx.fill()
      // 绘制线条颜色更改
      ctx.strokeStyle = 'blue'
      // 绘制线条颜色-默认黑色
      ctx.stroke()
    }
    let time = setInterval(function () {
      start()
    }, 20)
  </script>
</html>
复制代码 
​

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

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用canvas图片层级问题</title>
  </head>
  <body>
    <canvas
      id="canvas_1"
      width="1000"
      height="500"
      style="box-shadow: 0px 0px 20px skyblue;"
    >
    </canvas>
    <button></button>
  </body>
​
  <script>
    // 获取画布
    var canvas = document.getElementById('canvas_1')
    // 生成画布
    var ctx = canvas.getContext('2d')
    // 背景
    let background =
      'https://tyunfile.71360.com/UpLoadFile/2019/7/1/14/636975889218136385_shiyugongye_2267571.jpg'
​
    // 目标
    let target =
      'https://img2.baidu.com/it/u=3223764237,2661865711&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
    
    // 渲染方法
    let rendergraph = function (imgs, x, y, w, h) {
      // 创建一个img标签渲染图片
      let img = new Image()
      // 赋值图片
      img.src = imgs
      // 图片赋值在执行渲染
      img.onload = function () {
        // 渲染目标图片
        // ctx.drawImage(img标签, x坐标, y坐标, 宽度, 高度)
        ctx.drawImage(img, x, y, w, h)
      }
    }
    // 渲染背景图
    rendergraph(background, 0, 0, 1000, 500)
    // 渲染目标图
    rendergraph(target, 415, 80, 50, 50)
​
    // 总结：因为先渲染背景，在渲染篮球，所以篮球在背景之上
    // 总结：canvas图片层级是根据渲染顺序决定的
  </script>
</html>
复制代码 
​

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

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas-园-文字层级问题</title>
  </head>
  <body>
    <canvas
      id="canvas_1"
      width="1000"
      height="500"
      style="box-shadow: 0px 0px 20px skyblue;"
    >
    </canvas>
    <button></button>
  </body>
​
  <script>
    // 获取画布
    var canvas = document.getElementById('canvas_1')
    // 生成画布
    var ctx = canvas.getContext('2d')
    // 绘制字体-这个数字不会显示，被园遮挡
    ctx.fillStyle = '#fff'
    ctx.font = '20px 黑体'
    ctx.fillText('2', 100, 50, 20)
​
    // 开始绘制 - 这是一个周期-开始结束-只会渲染一个颜色
    ctx.beginPath()
    // 填充颜色
    ctx.fillStyle = '#bc8856'
    // ctx.arc(在画布x坐标，在画布y坐标，园半径，起始位置，结束位置)
    ctx.arc(100, 50, 40, 0, 2 * Math.PI)
​
    // 填充颜色
    ctx.fillStyle = '#437778'
    // ctx.arc(在画布x坐标，在画布y坐标，园半径，起始位置，结束位置)
    ctx.arc(150, 50, 20, 0, 2 * Math.PI)
​
    //开始填充
    ctx.fill()
​
​
    // 开始绘制-第二个周期
    ctx.beginPath()
    // 填充颜色
    ctx.fillStyle = '#bc8856'
    // ctx.arc(在画布x坐标，在画布y坐标，园半径，起始位置，结束位置)
    ctx.arc(100, 200, 40, 0, 2 * Math.PI)
    //开始填充
    ctx.fill()
​
    
    // 绘制字体-会显示-代码执行顺序
    ctx.fillStyle = '#fff'
    ctx.font = '20px 黑体'
    ctx.fillText('2', 150, 50, 20)
​
    ctx.fillStyle = '#fff'
    ctx.font = '20px 黑体'
    ctx.fillText('2', 100, 200, 20)
​
​
    // 总结：圆形默认填充色是黑色
    // 文字和图形的层级问题，取决于代码执行顺序
  </script>
</html>
​

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

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

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

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

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

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

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

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

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

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

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

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

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

缺点：行内样式不能生效（写在标签上的宽高也不会生效）

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

2.1画布标签

javascript 复制代码 
<div id="canvas-item">
              <canvas
                ref="canvas"></canvas>
</div>

2.2style样式

javascript 复制代码 
 #canvas-item {
        width: 1000px;
        height: 500px;
        // 画布
        canvas {
          width: 100%;
          height: 100%;
        }
      }

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

复制代码 
    
javascript 复制代码 
// 通过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基本使用和注意事项-动画闪烁效果-自适应适配不同分辨率问题 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

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

相关推荐
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
落魄小二2 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui
neter.asia2 小时前
vue中如何关闭eslint检测？
前端·javascript·vue.js
十一吖i2 小时前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年2 小时前
vue2与vue3的全局通信插件，如何实现自定义的插件
前端·javascript·vue.js
熊的猫3 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
mosen8684 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~5 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
Gavin_9156 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
Devil枫11 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play