Fatal编程技术网
  • javascript/
  • Javascript JS-防止鼠标离开屏幕

Javascript JS-防止鼠标离开屏幕

javascript css unity3d

Javascript JS-防止鼠标离开屏幕,javascript,css,unity3d,unity-webgl,Javascript,Css,Unity3d,Unity Webgl,我需要防止光标离开窗口。 我已经读到这是不可能的，但是我已经通过Unity项目的WebGL导出实现了这一点。您首先必须单击画布，然后浏览器会显示一个通知，告诉您应该按“escape”退出并取回光标。 由于Unity WebGL画布可以做到这一点，因此我假设在没有Unity的情况下也可以做到这一点。使用HTML5指针锁API 下面不是我的代码示例，所有的信条都是 HTML 指针锁演示 指针锁演示 这个演示演示了指针锁API的用法。单击画布区域，鼠标将直接控制画布内的球，而不是鼠标指针。您可以

我需要防止光标离开窗口。 我已经读到这是不可能的，但是我已经通过Unity项目的WebGL导出实现了这一点。您首先必须单击画布，然后浏览器会显示一个通知，告诉您应该按“escape”退出并取回光标。
由于Unity WebGL画布可以做到这一点，因此我假设在没有Unity的情况下也可以做到这一点。

使用HTML5指针锁API

下面不是我的代码示例，所有的信条都是

HTML


指针锁演示
指针锁演示
这个演示演示了指针锁API的用法。单击画布区域，鼠标将直接控制画布内的球，而不是鼠标指针。您可以按escape返回到标准的预期状态

您的浏览器不支持HTML5画布
JS

//helper函数
常数半径=20；
函数degToRad（度）{
var结果=Math.PI/180*度；
返回结果；
}
//画布的设置
var canvas=document.querySelector（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var x=50；
变量y=50；
函数canvasDraw（）{
ctx.fillStyle=“黑色”；
ctx.fillRect（0，0，canvas.width，canvas.height）；
ctx.fillStyle=“#f00”；
ctx.beginPath（）；
ctx.弧（x，y，半径，0，degToRad（360），真）；
ctx.fill（）；
}
拉票（）；
//跨浏览器的指针锁定对象分叉
canvas.requestPointerLock=canvas.requestPointerLock||
canvas.mozRequestPointerLock；
document.exitPointerLock=document.exitPointerLock||
document.mozExitPointerLock；
canvas.onclick=function（）{
canvas.requestPointerLock（）；
};
//指针锁定事件侦听器
//不同浏览器的挂钩指针锁定状态更改事件
document.addEventListener（'pointerlockchange'，lockChangeAlert，false）；
document.addEventListener（'mozpointerlockchange'，lockChangeAlert，false）；
函数lockChangeAlert（）{
if（document.pointerLockElement==画布||
document.mozPointerLockElement==画布）{
log（'指针锁定状态现在已锁定'）；
document.addEventListener（“mousemove”，updatePosition，false）；
}否则{
log（'指针锁定状态现在已解锁'）；
document.removeEventListener（“mousemove”，updatePosition，false）；
}
}
var tracker=document.getElementById（'tracker'）；
var动画；
函数更新位置（e）{
x+=e.movementX；
y+=e.movementY；
如果（x>画布宽度+半径）{
x=半径；
}
如果（y>画布高度+半径）{
y=半径；
}  
如果（x<-半径）{
x=画布宽度+半径；
}
如果（y<-半径）{
y=画布高度+半径；
}
tracker.textContent=“X位置：+X+”，Y位置：+Y；
如果（！动画）{
动画=请求动画帧（函数（）{
动画=空；
拉票（）；
});
}
}
使用HTML5指针锁API

下面不是我的代码示例，所有的信条都是

HTML


指针锁演示
指针锁演示
这个演示演示了指针锁API的用法。单击画布区域，鼠标将直接控制画布内的球，而不是鼠标指针。您可以按escape返回到标准的预期状态

您的浏览器不支持HTML5画布
JS

//helper函数
常数半径=20；
函数degToRad（度）{
var结果=Math.PI/180*度；
返回结果；
}
//画布的设置
var canvas=document.querySelector（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var x=50；
变量y=50；
函数canvasDraw（）{
ctx.fillStyle=“黑色”；
ctx.fillRect（0，0，canvas.width，canvas.height）；
ctx.fillStyle=“#f00”；
ctx.beginPath（）；
ctx.弧（x，y，半径，0，degToRad（360），真）；
ctx.fill（）；
}
拉票（）；
//跨浏览器的指针锁定对象分叉
canvas.requestPointerLock=canvas.requestPointerLock||
canvas.mozRequestPointerLock；
document.exitPointerLock=document.exitPointerLock||
document.mozExitPointerLock；
canvas.onclick=function（）{
canvas.requestPointerLock（）；
};
//指针锁定事件侦听器
//不同浏览器的挂钩指针锁定状态更改事件
document.addEventListener（'pointerlockchange'，lockChangeAlert，false）；
document.addEventListener（'mozpointerlockchange'，lockChangeAlert，false）；
函数lockChangeAlert（）{
if（document.pointerLockElement==画布||
document.mozPointerLockElement==画布）{
log（'指针锁定状态现在已锁定'）；
document.addEventListener（“mousemove”，updatePosition，false）；
}否则{
log（'指针锁定状态现在已解锁'）；
document.removeEventListener（“mousemove”，updatePosition，false）；
}
}
var tracker=document.getElementById（'tracker'）；
var动画；
函数更新位置（e）{
x+=e.movementX；
y+=e.movementY；
如果（x>画布宽度+半径）{
x=半径；
}
如果（y>画布高度+半径）{
y=半径；
}  
如果（x<-半径）{
x=画布宽度+半径；
}
如果（y<-半径）{
y=画布高度+半径；
}
tracker.textContent=“X位置：+X+”，Y位置：+Y；
如果（！动画）{
动画=请求动画帧（函数（）{
动画=空；
拉票（）；
});
}
}
即使可能，也不要这样做，因为这样做不利于用户，除非有正当理由，例如在游戏中。这实际上是为了游戏。即使可能，也不要这样做，因为这样做不利于用户，除非有正当理由，例如在游戏中。这实际上是为了游戏。 
<!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>

// 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();
    });
  }
}