Javascript - 鼠标跟随+照明？

Question

我正在练习我的 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>

Answer 1

非 Canvas 方式是:

• 将页面背景设置为黑色
• 使用“border-radius: 50%;”围绕#followDiv 的边界
• 设置这个div的背景为图片
• 播放背景位置以与鼠标相反移动

编辑:

• 最后使用 box-shadow 柔化边缘

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>