画布指针锁

Question

我想将鼠标锁定到canvas元素。 canvas元素存在，指针锁定可用。

这是我的控制台输出：

• 指针锁存在
• 未锁定
• 出现错误

已经检查了这两个链接，但找不到我的错误。由于实现指针锁不再需要全屏，我没有启动全屏。

http://www.html5rocks.com/en/tutorials/pointerlock/intro/

https://developer.mozilla.org/en-US/docs/WebAPI/Pointer_Lock

当然我也有一个点锁定器的退出功能。但我想问题不在那里。

var check_pointerLock = 'pointerLockElement' in document ||
'mozPointerLockElement' in document ||
'webkitPointerLockElement' in document;

if(check_pointerLock){
    console.log("Pointer lock exists");
    //canvas element to lock pointer to
    canvas.requestPointerLock = canvas.requestPointerLock ||
         canvas.mozRequestPointerLock ||
         canvas.webkitRequestPointerLock;
    canvas.requestPointerLock();

    //check for errors
    document.addEventListener('pointerlockerror', errorCallback, false);
    document.addEventListener('mozpointerlockerror', errorCallback, false);
    document.addEventListener('webkitpointerlockerror', errorCallback, false);



    // 1) Used as a boolean check: are we pointer locked?
    if (!!document.pointerLockElement) {
      console.log("locked");
    } else {
      // pointer is not locked
      console.log("not locked");
    }


}
function errorCallback() {
    console.log("There was an error");

}

Answer 1

问题是我使用了一个键来启动指针锁定，遗憾的是不可能。因此，我不得不坚持使用鼠标点击事件。