JS - 防止鼠标离开屏幕

Question

我需要防止光标超出 window。我读到这是不可能的，但是我已经通过从 Unity 项目导出 WebGL 来做到这一点。您首先必须单击 canvas，然后浏览器会向您显示一条通知，提示您应按 'escape' 退出并返回光标。由于 Unity WebGL canvas 可以做到，我认为没有 Unity 也可以做到吗？

Answer 1

使用HTML5指针锁定API

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API

下面不是我的代码示例，所有内容都归功于

https://github.com/mdn/dom-examples/tree/master/pointer-lock

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Pointer lock demo</title>
  <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
  <div class="information">
    <h1>Pointer lock demo</h1>

    <p>This demo demonstrates usage of the pointer lock API. Click on the canvas area and your mouse will directly control the ball inside the canvas, not your mouse pointer. You can press escape to return to the standard expected state.</p>
  </div>

  <canvas width="640" height="360">
    Your browser does not support HTML5 canvas
  </canvas>
  <div id="tracker"></div>

  <script src="app.js"></script>
</body>
</html>

JS

// helper function
const RADIUS = 20;

function degToRad(degrees) {
  var result = Math.PI / 180 * degrees;
  return result;
}

// setup of the canvas

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var x = 50;
var y = 50;

function canvasDraw() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#f00";
  ctx.beginPath();
  ctx.arc(x, y, RADIUS, 0, degToRad(360), true);
  ctx.fill();
}
canvasDraw();

// pointer lock object forking for cross browser

canvas.requestPointerLock = canvas.requestPointerLock ||
                            canvas.mozRequestPointerLock;

document.exitPointerLock = document.exitPointerLock ||
                           document.mozExitPointerLock;

canvas.onclick = function() {
  canvas.requestPointerLock();
};

// pointer lock event listeners

// Hook pointer lock state change events for different browsers
document.addEventListener('pointerlockchange', lockChangeAlert, false);
document.addEventListener('mozpointerlockchange', lockChangeAlert, false);

function lockChangeAlert() {
  if (document.pointerLockElement === canvas ||
      document.mozPointerLockElement === canvas) {
    console.log('The pointer lock status is now locked');
    document.addEventListener("mousemove", updatePosition, false);
  } else {
    console.log('The pointer lock status is now unlocked');  
    document.removeEventListener("mousemove", updatePosition, false);
  }
}

var tracker = document.getElementById('tracker');

var animation;
function updatePosition(e) {
  x += e.movementX;
  y += e.movementY;
  if (x > canvas.width + RADIUS) {
    x = -RADIUS;
  }
  if (y > canvas.height + RADIUS) {
    y = -RADIUS;
  }  
  if (x < -RADIUS) {
    x = canvas.width + RADIUS;
  }
  if (y < -RADIUS) {
    y = canvas.height + RADIUS;
  }
  tracker.textContent = "X position: " + x + ", Y position: " + y;

  if (!animation) {
    animation = requestAnimationFrame(function() {
      animation = null;
      canvasDraw();
    });
  }
}

JS - 防止鼠标离开屏幕

JS - Prevent mouse from leaving screen

javascript

css

unity3d

unity-webgl