| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/ja/docs/Web/API/Pointer_Lock_API | [Back] [Original] |
Get to know MDN better
API API DOM requestPointerLock() canvas
canvas.requestPointerLock =
canvas.requestPointerLock || canvas.mozRequestPointerLock;
canvas.requestPointerLock();
API Document pointerLockElement Document exitPointerLock()
pointerLockElement
if (
document.pointerLockElement === canvas ||
document.mozPointerLockElement === canvas
) {
console.log("The pointer lock status is now locked");
} else {
console.log("The pointer lock status is now unlocked");
}
Document.exitPointerLock() requestPointerLock() pointerlockchange pointerlockerror
document.exitPointerLock =
document.exitPointerLock || document.mozExitPointerLock;
//
document.exitPointerLock();
requestPointerLock() exitPointerLock() ESC pointerlockchange document
if ("onpointerlockchange" in document) {
document.addEventListener("pointerlockchange", lockChangeAlert, false);
} else if ("onmozpointerlockchange" in document) {
document.addEventListener("mozpointerlockchange", lockChangeAlert, false);
}
function lockChangeAlert() {
if (
document.pointerLockElement === canvas ||
document.mozPointerLockElement === canvas
) {
console.log("The pointer lock status is now locked");
//
} else {
console.log("The pointer lock status is now unlocked");
//
}
}
requestPointerLock() exitPointerLock() pointerlockerror document
document.addEventListener("pointerlockerror", lockError, false);
document.addEventListener("mozpointerlockerror", lockError, false);
function lockError(e) {
alert("Pointer lock failed");
}
:
Firefox 50 moz
API MouseEvent movement 2 movementX movementY MouseEvent screenX screenY 2 mousemove eNow ePrevious movementX eNow.screenX - ePrevious.screenX
MouseEvent clientXclientYscreenXscreenY movementX movementY movementX movementY
()JavaScript <canvas> canvas
canvas x y
const x = 50;
const y = 50;
canvas.requestPointerLock =
canvas.requestPointerLock || canvas.mozRequestPointerLock;
document.exitPointerLock =
document.exitPointerLock || document.mozExitPointerLock;
requestPointerLock()
canvas.onclick = () => {
canvas.requestPointerLock();
};
pointerlockchange lockChangeAlert()
//
//
document.addEventListener("pointerlockchange", lockChangeAlert, false);
document.addEventListener("mozpointerlockchange", lockChangeAlert, false);
pointLockElement 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() (x y) if() requestAnimationFrame() canvasDraw() X Y tracker
const tracker = document.getElementById("tracker");
let 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(() => {
animation = null;
canvasDraw();
});
}
}
canvasDraw() x y
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();
}
iframe 1 iframe iframe iframe iframe
iframe iframe <iframe sandbox="allow-pointer-lock">
| Pointer Lock 2.0 |
| Web Proxy Viewer | New URL | Original Page |