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

问题描述：

项目中，运用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();

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

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

秒客网

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

相关文章