Pointer Lock API（3/3）：一个Demo

简单的Demo演练

完整代码

<!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">
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
        
        html {
            font-family: sans-serif;
        }
        
        canvas {
            display: block;
            margin: 0 auto;
            border: 1px solid black;
        }
        
        .information {
            width: 640px;
            margin: 0 auto 50px;
        }
        
        #tracker {
            position: absolute;
            top: 0;
            right: 10px;
            background-color: white;
        }
        
        h1 {
            font-size: 200%;
        }
    </style>
</head>

<body>
    <div class="information">
        <h1>Pointer lock demo</h1>

        <p>本演示演示了指针锁API的用法。 单击画布区域，您的鼠标将直接控制画布内的球，而不是鼠标指针。 您可以按Escape键以返回到标准预期状态。</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>
<script>
    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();
            });
        }
    }
</script>

</html>

代码说明

设定x,y 初始值：

var x = 50;
var y = 50;

指针锁定方法（这里考虑了firefox浏览器兼容）：

//声明
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock;
//退出
document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock;

现在，我们给canvas设定一个点击事件来监听触发requestPointerLock()方法，当点击时，将启动指针锁定。：

canvas.onclick = function() { //canvas元素绑定点击事件
    canvas.requestPointerLock();
}

对于专用指针锁定事件侦听器：pointerlockchange。我们运行一个名为lockChangeAlert()的函数来处理更改。

// pointer lock event listener

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

该函数检查poinLockElement 属性，是不是我们的canvas元素，如果是，则通过附加一个事件侦听函数updatePosition()来处理鼠标移动。如果不是，他将再次移除事件侦听。

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

该updatePosition()函数更新canvas中小球的位置（x，y值），同时也包括了if条件判断检查小球是否超出了canvas画布的边界。如果是，那么它会让小球绕到对面的那边，它还包括检查之前是否已经进行了requestAnimationFrame()调用，如果进行了调用，就会再次以required被调用，并且唤起canvasDraw()函数，来更行canvas画面，还设置了一个跟踪器，以将X和Y值写到屏幕上，以供参考。

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

canvasDraw()函数以最新的坐标绘制小球的位置

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