JavaScript实现擦玻璃效果分析鼠标移动响应时间粒度问题
作者：青天诀
问题描述：
在实现擦玻璃效果时，需要实现根据鼠标移动进行绘制路径。开始运用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事件，所以无法通过移动一个像素就绘制一个圆，进而形成连续轨迹路径。如下图所示，移动过快时，路径会间断。
我们换种思路，第一次mousemove响应时，记录为起点startPoint，第二次响应记录为终点endPoint，将两点相连绘制直线，就不会出现中间断点的情况。 为了美观，可以利用lineCap属性，可以保证直线两端为圆角，如下所示：
ctx.beginPath(); ctx.lineCap="round"; ctx.moveTo(20,40); ctx.lineTo(200,40); ctx.stroke();
这样我们的问题就解决了 演示效果：zhaoshaobang.github.io/blog/lotter…
以上就是JavaScript实现擦玻璃效果分析鼠标移动响应时间粒度问题的详细内容，更多关于JavaScript 擦玻璃鼠标移动的资料请关注脚本之家其它相关文章！