您的位置：首页 > 其它

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

2015-09-01 18:44 495 查看

问题描述：

项目中，运用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/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航