通过JavaScript记录鼠标运动轨迹并利用canvas进行轨迹重现

最新推荐文章于 2025-11-07 07:30:00 发布

原创

最新推荐文章于 2025-11-07 07:30:00 发布 · 3.8k 阅读

14 ·

CC 4.0 BY-SA版权

本文介绍了一种记录鼠标移动轨迹并实现轨迹重绘的方法。通过监听鼠标事件和使用canvas元素，可以捕捉并保存鼠标在画布上的路径，并利用递归调用requestAnimationFrame来重现这些轨迹。此方案适用于交互式应用及数据可视化。

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

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

思考

如何记录鼠标轨迹
记录鼠标轨迹的方法很简单，记录鼠标每次move事件的前后两个点坐标即可。
如何重绘
我们通过记录鼠标在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