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

Question

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

请指出正确的方向。

Answer 1

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

摘自上面链接的文章(我的重点):

The Pointer Lock API (formerly called Mouse Lock API) provides input methods based on the movement of the mouse over time (i.e., deltas), not just the absolute position of the mouse cursor in the viewport. It gives you access to raw mouse movement, locks the target of mouse events to a single element, eliminates limits on how far mouse movement can go in a single direction, and removes the cursor from view. It is ideal for first person 3D games, for example.

More than that, the API is useful for any applications that require significant mouse input to control movements, rotate objects, and change entries, for example allowing users to control the viewing angle by moving the mouse around without any button clicking. The buttons are then freed up for other actions. Other examples include apps for viewing maps or satellite imagery.

Pointer lock lets you access mouse events even when the cursor goes past the boundary of the browser or screen. For example, your users can continue to rotate or manipulate a 3D model by moving the mouse without end. Without Pointer lock, the rotation or manipulation stops the moment the pointer reaches the edge of the browser or screen. Game players can now click buttons and swipe the mouse cursor back and forth without worrying about leaving the game play area and accidentally clicking another application that would take mouse focus away from the game.

另请参阅示例链接。