javascript - Javascript-鼠标跟随+照明？

我正在练习Javascript，所以我做了一个鼠标跟随功能。我知道了，但是现在我有了一个新主意，我不确定这是可能的。

有没有一种方法可以使“视觉球”跟随鼠标移动，从而使该区域中的所有内容都可见？有点像使用手电筒，看到鼠标所在的小区域。




注意：我并不是要有人为我编写代码，而是要解释一下，因为我很想自己学习，但是我确实需要一个指导！**

function mouseMovement(e) {
  var x = document.getElementById('x_show');
  var y = document.getElementById('y_show');

  x.innerHTML = e.clientX;
  y.innerHTML = e.clientY;

  document.getElementById("followDiv").style.left = event.clientX - 15 + "px";
  document.getElementById("followDiv").style.top = event.clientY - 15 + "px";


}
document.onmousemove = mouseMovement;

#followDiv {
  background-color: lightblue;
  height: 30px;
  width: 30px;
  position: absolute;
}

<p id="x_show">0</p>
<p id="y_show">0</p>
<div id="followDiv"></div>

最佳答案

一种非画布的方式是：


将页面背景设置为黑色
使用“边框半径：50％”对#followDiv的边界进行四舍五入。
将此div的背景设置为image
播放背景位置以与鼠标相反


编辑：


通过使用盒子阴影柔化边缘来最终触摸

function mouseMovement(e) {
  var x = document.getElementById('x_show');
  var y = document.getElementById('y_show');

  x.innerHTML = e.clientX;
  y.innerHTML = e.clientY;

  var followDiv = document.getElementById("followDiv");
  followDiv.style.left = event.clientX - 60 + "px";
  followDiv.style.top = event.clientY - 60 + "px";
  followDiv.style.backgroundPositionX = (-event.clientX) + 'px';
  followDiv.style.backgroundPositionY = (-event.clientY) + 'px';





}
document.onmousemove = mouseMovement;

body {
  background: black;
}

#followDiv {
  background-color: lightblue;
  height: 120px;
  width: 120px;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 12px 12px black inset, /* workaround for a soft edge issue :
               http://stackoverflow.com/a/37460870/5483521
            */
  0 0 2px 2px black inset, 0 0 2px 2px black inset, 0 0 2px 2px black inset;
  background: url(https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg) no-repeat;
}

<p id="x_show">0</p>
<p id="y_show">0</p>
<div id="followDiv"></div>

关于javascript - Javascript-鼠标跟随+照明？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42286599/