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 擦玻璃鼠标移动的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了js实现九宫格布局效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
深入理解JavaScript系列(3) 全面解析Module模式
Module模式是JavaScript编程中一个非常通用的模式，一般情况下，大家都知道基本用法，本文尝试着给大家更多该模式的高级使用方式2012-01-01
这篇文章主要介绍了JS正则子匹配用法,结合简单实例形式分析了js正则字匹配的概念、用法与相关注意事项,需要的朋友可以参考下2016-12-12
重点在于:以空间换时间，循环确定所着颜色;base确定起始颜色，i确定本次需要着色的单元格，感兴趣的朋友可以参考下哈2013-04-04
这篇文章主要为大家详细介绍了js实现列表按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了javascript实现的一个带下拉框功能的文本框,需要的朋友可以参考下2014-05-05
微信浏览器内置了javascript私有对象WeixinJSBridge，可以实现发送给朋友、分享到朋友圈、分享到微博等功能，本篇文章给大家介绍基于js实现微信发送给朋友如何分享到朋友圈、微博，感兴趣的朋友一起学习吧2015-11-11
这篇文章主要为大家详细介绍了原生js+canvas实现验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
JS提示：Uncaught SyntaxError:Unexpected token ) 错误的解决方法
这篇文章主要介绍了JS提示：Uncaught SyntaxError:Unexpected token ) 错误的解决方法,结合实例形式分析了javascript提示此类异常的常见原因与相关解决方法,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了element-ui 实现输入框下拉树组件功能,使用element-ui的 el-input,el-tree,el-popover组件组合封装,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-05-05
最新评论