我写了一个小的Javascript应用程序来跟踪和显示鼠标速度的x和y分量 . 它从当前位置减去光标的先前位置，并按时间划分 . 非常简单的东西 . 这是完整的工作来源：
<!DOCTYPE html5>
<html>
<head>
<meta charset="UTF-8">
<style>
* {
background-color:#000000;
}
html {
width:100%;
height:100%;
}
#readout {
background-color:#FFFFFF;
border: 8px solid #34a1ff;
width: 162px;
height: 100px;
position:absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
padding: 16px;
}
.text {
background-color:#FFFFFF;
}
</style>
</head>
<body>
<div id="readout">
<span id="xLabel" class="text">X: </span>
<span id="xValue" class="text"></span>
<br>
<span id="yLabel" class="text">Y: </span>
<span id="yValue" class="text"></span>
</div>
<script>
// Where the speed will be displayed
window.xDisplay = document.getElementById("xValue");
window.yDisplay = document.getElementById("yValue");
// Keep track of last time mouse was moved
window.lastTime = new Date().getTime();
window.lastDeltaTime = 0;
window.lastMouseX = 0;
window.lastMouseY = 0;
window.lastVX = 0; // for smoothing
window.lastVY = 0;
// Listen for mouse move event
document.addEventListener('mousemove', function(e){
// Get current mouse position
var currentX = e.clientX || e.pageX;
var currentY = e.clientY || e.pageY;
// Get distance travelled from last mouse position
var deltaX = currentX - lastMouseX;
var deltaY = currentY - lastMouseY;
// Update mouse position
lastMouseX = currentX;
lastMouseY = currentY;
// Get current time
var currentTime = new Date().getTime();
// Get time elapsed since last mouse event
var deltaTime = currentTime - lastTime;
// Update last time
lastTime = currentTime;
// Get velocity components
var xSpeed = deltaX / deltaTime;
var ySpeed = deltaY / deltaTime;
// Smooth out velocity
var xSmooth = (xSpeed*2 + lastVX)/3;
var ySmooth = (ySpeed*2 + lastVY)/3;
// Update previous components
lastVX = xSpeed;
lastVY = ySpeed;
// Display velocity
xDisplay.innerHTML = xSmooth.toFixed(3);
yDisplay.innerHTML = ySmooth.toFixed(3);
}, false);
</script>
</body>
</html>
这将用于旨在以全屏模式运行的应用程序 . 我遇到的问题是当光标一直在屏幕边缘结束时，用户继续沿那个方向移动鼠标 . （例如：光标一直在屏幕的右边缘，但用户不断向右移动鼠标） .
在上面的场景中，应用程序显示的速度为零，因为光标位置没有更新 . 但是，我需要一个解决方案，即使在光标到达边缘后仍继续显示实际鼠标速度（此站点上没有类似问题解决此问题） .
这很重要，因为用例将位于WebGL上下文中，其中鼠标用于控制来自第一人称视图的旋转 . 用户需要能够在旋转速度基于鼠标速度（不是位置！）的情况下继续旋转他们的视图多次，并且这通过从光标位置计算鼠标速度而无法正常工作 .
这可能需要一些创造力，但我确信它可以做到 . 在此先感谢任何解决方案！
1 回答
找到解决方案，万一有人以后偶然发现这个问题 .
Pointer Lock API完全符合我的需要 .