mousemove事件，鼠标移动过快时，无法全部响应

来源：互联网发布：ca认证知乎编辑：程序博客网时间：2024/04/28 00:58

问题描述：

项目中，运用mousemove来实现绘制圆形时，发现鼠标移动速度过快时，绘制的圆形，不能连接一起，中间出现断点，无法形成一条完整的路径。

问题分析：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>事件</title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        #content{            width: 200px;            height: 200px;            border: 1px solid #ccc;            background-color: blue;            margin: 0 auto;        }    </style></head><body>    <div id="content"></div>    <script type="text/javascript">        var box=document.getElementById("content");        var isMouseDown=false;        var t=0;        box.addEventListener("mousemove",function(e){            if(isMouseDown){                console.log("move");                    /*t++;                console.log(t);*/            }        });        box.addEventListener("mousedown",function(e){            isMouseDown=true;        });        document.addEventListener("mouseup",function(e){            isMouseDown=false;        });    </script></body></html>

效果图：

鼠标移动过快时

鼠标移动缓慢时
经过如上代码分析，发现当鼠标移动过快时，console.log(“move”)执行的次数很少；当鼠标移动足够缓慢时，执行次数鼠标移动的像素数近似（这正好验证了，当每移动一个像素时，就会触发mousemove事件）。

原因：鼠标移动时，不会存储所有的移动信息，而是通过取插值的方法取得鼠标位置信息，否则，系统会被鼠标移动拖垮。所以就会出现，移动过快时，出现断点的问题。

解决方案：

鼠标移动过快时，不能做到移动一个像素，响应一次mousemove事件，所以导致，绘制的圆形不连续。我们换种思路，直接在两次响应mousemove事件时，绘制直线，正好可以连接中间的断点。
为了美观，可以利用lineCap属性，可以保证直线两端为圆角，如下所示：

ctx.beginPath();ctx.lineCap="round";ctx.moveTo(20,40);ctx.lineTo(200,40);ctx.stroke();

这里写图片描述

这样我们的问题就解决了
演示效果：http://zhaoshaobang.github.io/blog/lottery/

0 0