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 擦玻璃鼠标移动的资料请关注脚本之家其它相关文章！
相关文章
nodejs(nestjs)后端开发过程中会有一个需要生成图片验证码的功能,其能减少机器人攻击操作,本文我们通过 svg-captcha,来实现一个验证码功能,并且小小的优化一下其逻辑,需要的朋友可以参考下2024-06-06
bootstrap datetimepicker控件位置异常的解决方法
这篇文章主要为大家详细介绍了bootstrap datetimepicker控件位置异常的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
BootStrap自定义popover,点击区域隐藏功能的实现
下面小编就为大家分享一篇BootStrap自定义popover,点击区域隐藏功能的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了js获取及判断键盘按键的方法,涉及JavaScript键盘事件的获取及键值的判定技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
打印当前的时间的方法有很多，在本文为大家详细介绍下使用javascript是如何做到的，具体实现如下，感兴趣的朋友可以参考下2013-12-12
作为一名开发人员（WEB前端JavaScript开发），不规范的开发不仅使日后代码维护变的困难，同时也不利于团队的合作，通常还会带来代码安全以及执行效率上的问题。本文就主要介绍了关于Javascript的命名规范、注释规范以及框架开发的一些问题，需要的朋友可以参考学习。2017-01-01
这篇文章主要介绍了如何在JavaScript中正确处理变量，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了Javascript高级技巧,需要的朋友可以参考下2014-02-02
昨天给大家分享了在网页端使用zip.js插件实现在线压缩文件的代码，今天给大家分享一下javascript实现网页端解压并查看zip文件的方法，非常的实用，有需要的小伙伴可以参考下2015-12-12
这篇文章主要为大家详细介绍了微信小程序实现滚动消息通知，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-02-02
最新评论