前端可视化echarts和three

canvas画一条直线

  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  ctx.beginPath()//绘制都用beginPath和closePath包裹
  ctx.lineWidth = 4
  ctx.strokeStyle = 'orange'
  // 起点  终点  中间点
  ctx.moveTo(100, 100)
  ctx.lineTo(300, 300)
  ctx.lineTo(500, 200)
  ctx.stroke()//添上才能显示出来
  ctx.closePath()
 

canvas绘制实心空心文字

  // 实心文字 描边文字
  ctx.fillStyle = 'orange'
  ctx.strokeStyle = "hotpink"
  ctx.font = 'bold 60px 微软雅黑'
  ctx.fillText('拉勾教育', 100, 100, 100)
  ctx.strokeText('前端', 100, 240)

  // 对齐属性设置
  ctx.textAlign = 'center' // left right start end center 
  ctx.textBaseline = "middle"  // top bottom middle
  ctx.fillText('拉勾教育', 450, 300)

canvas实现动画及碰撞检测

实现动画的原理时不停地改变物体的x,y值，记得每次都要有清空画布的操作，碰撞检测原理就是物体的坐标减去物体一半的宽度小于等于0或者物体的坐标加上物体一半的宽度大于等于画布的宽度时，让坐标的变化速度值取反

  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  canvas.style.width = canvas.width + 'px'
  canvas.style.height = canvas.height + 'px'
  canvas.width = canvas.width * 1.5
  canvas.height = canvas.height * 1.5

  const drawCircle = (x, y, r) => {
    ctx.beginPath()
    ctx.fillStyle = 'orange'
    ctx.arc(x, y, r, 0, Math.PI * 2)
    ctx.fill()
    ctx.closePath()
  }

  // 配置属性
  const wd = canvas.clientWidth * 1.5
  const ht = canvas.clientHeight * 1.5
  let x = y = 100
  const r = 20
  let xSpeed = 6
  let ySpeed = 4

  drawCircle(x, y, r)

  setInterval(() => {
    ctx.clearRect(0, 0, wd, ht)  // 清空画布
    if (x - r <= 0 || x + r >= wd) {
      xSpeed = -xSpeed
    }

    if (y - r <= 0 || y + r >= ht) {
      ySpeed = -ySpeed
    }
    x += xSpeedjiang
    y += ySpeed
    drawCircle(x, y, r)
  }, 20)

将一个会变颜色，不同大小，不同速率走的球写成一个类，然后遍历添加

  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  canvas.style.width = canvas.width + 'px'
  canvas.style.height = canvas.height + 'px'
  canvas.width = canvas.width * 1.5
  canvas.height = canvas.height * 1.5

  class Ball {
    constructor(canvas) {
      this.canvas = canvas
      this.ctx = this.canvas.getContext('2d')
      this.wd = this.canvas.clientWidth * 1.5
      this.ht = this.canvas.clientHeight * 1.5
      this.r = Math.random() * 40 + 10
      this.x = Math.random() * (this.wd - (this.r * 2)) + this.r
      this.y = Math.random() * (this.ht - (this.r * 2)) + this.r
      this.color = '#' + parseInt(Math.random() * 0xFFFFFF).toString(16)
      this.xSpeed = Math.random() * 4 + 6
      this.ySpeed = Math.random() * 6 + 4
      this.init()
    }

    init() {
      this.run()
      this.draw()
    }

    draw() {
      this.ctx.beginPath()
      this.ctx.fillStyle = this.color
      this.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
      this.ctx.fill()
      this.ctx.closePath()
    }

    run() {
      if (this.x - this.r <= 0 || this.x + this.r >= this.wd) {
        this.xSpeed = -this.xSpeed
      }
      if (this.y - this.r <= 0 || this.y + this.r >= this.ht) {
        this.ySpeed = -this.ySpeed
      }
      this.x += this.xSpeed
      this.y += this.ySpeed
    }
  }

  let ballArr = []
  for (let i = 0; i < 100; i++) {
    let ball = new Ball(canvas)
    ballArr.push(ball)
  }

  // 动画
  setInterval(() => {
    ctx.clearRect(0, 0, canvas.clientWidth * 1.5, canvas.clientHeight * 1.5)
    for (let i = 0; i < ballArr.length; i++) {
      let ball = ballArr[i]
      ball.init()
    }
  }, 15)

canva实现每个圆连线并且能够添加文字的思路
将绘制文字和绘制线的方法添加到球的类中，
然后在定时器中循环遍历ball数组，先画线，然后再画球

动态设置rem全局实现

在public中的index下添加

  <title>可视化插件封装</title>
  <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'
    window.addEventListener('resize', () => {
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'
    })
  </script>

动画函数从0到指定值方法的实现

export default function myAnimation(param) {
  let current = 0
  let looped
  const ctx = this.ctx
  const _canvas = this._canvas
  const callback = param.render
  const successCb = param.success;
  (function looping() {
    looped = requestAnimationFrame(looping)
    if (current < param.percent) {
      ctx.clearRect(0, 0, _canvas.width, _canvas.height)
      current = current + 4 > param.percent ? param.percent : current + 4
      callback(current)
    } else {
      window.cancelAnimationFrame(looping)
      looped = null
      successCb && successCb()
    }
  })()
}

函数调用

myAnimation.call(this, {
          percent: 100,
          render: (current) => {
            console.log(current)
          }
        })