JavaScript实现擦玻璃效果分析鼠标移动响应时间粒度问题

问题描述：

在实现擦玻璃效果时，需要实现根据鼠标移动进行绘制路径。开始运用mousemove来实现绘制圆形时，发现鼠标移动速度过快时，绘制的圆形，不能连接一起，中间出现断点，无法形成一条完整的路径。

问题分析：

鼠标移动过快时效果图：

鼠标移动缓慢时效果图：

经过如上代码分析，发现当鼠标移动过快时，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 擦玻璃鼠标移动的资料请关注0133技术站其它相关文章！