一周前所长找到我，问我有没有办法记录鼠标轨迹~~

详细的问过他的具体需求之后，发现是要做成这样的，以下为效果图：

思考

1. 如何记录鼠标轨迹
   记录鼠标轨迹的方法很简单，记录鼠标每次move事件的前后两个点坐标即可。
2. 如何重绘
   我们通过记录鼠标在canvas中的点的相对坐标可以得到一个对象数组，通过requestAnimationFrame递归对数组进行循环操作，相关代码如下：

    redraw (context) {
    
      if (localStorage.getItem('history')) {
    
        let history = JSON.parse(localStorage.getItem('history'))
        const len = history.length
        let i = 0
        const runner = () => {
    
          if (i < len) {
    
            this.draw(context, history[i][0], history[i++][1]) //绘制两点之间的连线
            requestAnimationFrame(runner) //递归调用
          }
        }
        requestAnimationFrame(runner)
      }
    }

组件源码

<template>
  <section>
    <button @click="reload">开始重绘</button>
    <button @click="reset">重置右侧画板</button>
    <h1>测试画板</h1>
    <canvas id="panel1" width="700px" height="500" style="border: 1px solid ;">

    </canvas>
    <canvas id="panel2" width="700px" height="500" style="border: 1px solid ;">

    </canvas>
  </section>
</template>

<script>
export default {
    
  name: 'redraw',
  mounted () {
    
    this.canvas = document.querySelector('#panel1')
    this.redrawCanvas = document.querySelector('#panel2')
    this.init()
  },
  methods: {
    
    reload () {
    
      this.reset()
      this.redraw(this.redrawCxt)
    },
    init () {
    
      this.canvas.onmousedown = e => {
    
        this.isMouseDown = true
        this.lastLoc = this.window2Canvas(e.clientX, e.clientY)
      }
      this.canvas.onmouseout = e => {
    
        this.isMouseDown = false
      }
      this.canvas.onmousemove = e => {
    
        if (this.isMouseDown) {
    
          let curLoc = this.window2Canvas(e.clientX, e.clientY)// 获得当前坐标
          this.draw(this.context, this.lastLoc, curLoc)
          this.history.push([this.lastLoc, curLoc])
          this.lastLoc = Object.assign({
    }, curLoc) // U know what I mean.
        }
      }
      this.canvas.onmouseup = e => {
    
        this.isMouseDown = false
        if (history.length) {
    
          localStorage.setItem('history', JSON.stringify(this.history))
        }
      }
    },
    window2Canvas (x, y) {
    
      let bbox = this.canvas.getBoundingClientRect()
      return {
    x: Math.round(x - bbox.left), y: Math.round(y - bbox.top)}
    },
    draw (context, lastLoc, curLoc) {
    
      context.lineWidth = 5
      context.beginPath()
      context.moveTo(lastLoc.x, lastLoc.y)
      context.lineTo(curLoc.x, curLoc.y)
      context.strokeStyle = '#000'
      context.lineCap = 'round'
      context.lineJoin = 'round'
      context.stroke()
    },
    reset () {
    
      this.redrawCxt.clearRect(0, 0, this.redrawCanvas.width, this.redrawCanvas.height)
    },
    redraw (context) {
    
      if (localStorage.getItem('history')) {
    
        let history = JSON.parse(localStorage.getItem('history'))
        const len = history.length
        let i = 0
        const runner = () => {
    
          i++
          if (i < len) {
    
            this.draw(context, history[i][0], history[i][1])
            requestAnimationFrame(runner)
          }
        }
        requestAnimationFrame(runner)
      }
    }
  },
  data () {
    
    return {
    
      canvas: null,
      redrawCanvas: null,
      isMouseDown: false,
      lastLoc: {
    x: 0, y: 0},
      history: []
    }
  },
  computed: {
    
    context () {
    
      return this.canvas.getContext('2d')
    },
    redrawCxt () {
    
      return this.redrawCanvas.getContext('2d')
    }
  }
}
</script>

<style scoped>

</style>