使用javascript动态更改光标原点？

Question

有没有办法通过 javascript 访问光标，以便您可以定义图像的 x、y 位置？ 我在 css 中为光标设置了一个自定义 data-uri，我希望能够动态调整偏移量，而不必重新定义整个东西。

body{
    cursor: url('data:image/svg+xml;utf8,<svg fill="none" stroke="black" stroke-width="1" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 H 6 L 12 12 V 18"/></svg>') 24 24, auto;
}

如何通过 javascript 动态设置 x、y？？

Answer 1

如果您确实想了解指针锁定，这里有一个无 jQuery 的实现。

var getPointerLock = () => {
  if (document.body.mozRequestPointerLock) {
    document.body.mozRequestPointerLock();
  } else if (document.body.requestPointerLock) {
    document.body.requestPointerLock();
  }
};

var x = 0;
var y = 0;

document.body.onclick = (evt) => {
  getPointerLock();
  x = evt.clientX;
  y = evt.clientY;
};

document.body.onmousemove = (evt) => {
  if (document.pointerLockElement || document.mozPointerLockElement) {
    x += evt.movementX;
    y += evt.movementY;
    document.body.innerHTML = `${x}, ${y}`;
  }
};

html {
  height: 100%;
}

body {
  height: 100%;
}