javascript - 如何在画布/div中包含我的鼠标指针？

Question

我目前正在尝试制作一个小型 html5 画布游戏。我希望我的鼠标指针停留在 div 元素或画布边界内。

请指出我正确的方向。

Answer 1

您可以使用新的Pointer Lock API。现在 Chrome、Firefox、Edge、Opera 和 Safari 都支持它。

摘自上面链接的文章（我的重点）：

Pointer Lock API（以前称为 Mouse Lock API）提供基于鼠标随时间移动（即增量）的输入方法，而不仅仅是鼠标光标在视口中的绝对位置。它使您可以访问原始鼠标移动，将鼠标事件的目标锁定到单个元素，消除鼠标在单个方向上移动距离的限制，并从视图中移除光标。例如，它非常适合第一人称 3D 游戏。

不仅如此，该 API 对于任何需要大量鼠标输入来控制移动、旋转对象和更改条目的应用程序都很有用，例如，允许用户通过移动鼠标来控制视角，而无需单击任何按钮。然后释放按钮以执行其他操作。其他示例包括用于查看地图或卫星图像的应用程序。

即使光标超出浏览器或屏幕的边界，指针锁定也可让您访问鼠标事件。例如，您的用户可以通过不停地移动鼠标来继续旋转或操作 3D 模型。如果没有指针锁定，旋转或操作会在指针到达浏览器或屏幕边缘的那一刻停止。游戏玩家现在可以单击按钮并来回滑动鼠标光标，而不必担心离开游戏区域并意外单击另一个会导致鼠标焦点离开游戏的应用程序。

另请参阅链接以获取示例。