Javascript (jQuery) 限制元素内的鼠标移动速度

Question

任务是在 Canvas 上绘制一条曲线。问题是，如果鼠标移动得太快，坐标就会被跳过并且不会被捕获。 ( Html5/Js canvas capturing mouse coords when it moves fast - 我之前的帖子..)

是否有跨浏览器的方法来限制元素(div、canvas 等)内的鼠标速度？

Answer 1

我认为“限制鼠标速度”实际上是指启用捕获大量鼠标事件，以便获得鼠标路径的更详细信息或分辨率。

当涉及到鼠标事件时，浏览器通常会在高层工作。系统将捕获鼠标事件，但浏览器将执行许多其他任务，例如推送事件、冒泡事件等，并且仅在实际可以捕获当前鼠标位置时才捕获当前鼠标位置。

为了弥补这一点，您需要使用各种技巧，例如样条线。

可能的解决方法

我不打算对此做出广泛的回答，因为它很快就会超出您执行样条方法所需的步骤和场景的范围(插值、需要相对 Angular 跟踪的拐点、平滑)等)。

但是，有一个名为 Pointer Lock API 的新 API (也请参阅该链接中的演示和源代码)，这允许浏览器在更接近系统的较低级别上工作，因此它可以比其他方式更快、更大地生成鼠标事件。

与所有低级方法一样，它确实有一些缺点:

• 您需要渲染自己的光标
• 鼠标移动不限于边缘，因此您需要提供包裹或限制自己
• 它将请求用户许可
• 并非所有浏览器都支持
• 它的目标不仅仅是游戏和 3D 绘图应用

但这是您在没有插值等的情况下最接近的大量鼠标事件。