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

非帆布方法是：

• 设置页面背景设为黑色
• 回合使用#followDiv的国界边界半径：50％;'
• 设置的这个背景div来图像
• 播放与背景位置，以相对移动到鼠标

编辑：

• 最后一个触摸通过软化使用框边缘 - 阴影

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>

Answer 2

我认为这可以帮助你想要什么。

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
function reOffset(){ 
 
    var BB=canvas.getBoundingClientRect(); 
 
    offsetX=BB.left; 
 
    offsetY=BB.top;   
 
} 
 
var offsetX,offsetY; 
 
reOffset(); 
 
window.onscroll=function(e){ reOffset(); } 
 
window.onresize=function(e){ reOffset(); } 
 

 
$("#canvas").mousemove(function(e){handleMouseMove(e);}); 
 

 
var radius=30; 
 

 
var img=new Image(); 
 
img.onload=function(){ 
 
    draw(150,150,30); 
 
} 
 
img.src='https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg' 
 

 

 
function draw(cx,cy,radius){ 
 
    ctx.save(); 
 
    ctx.clearRect(0,0,cw,ch); 
 
    var radialGradient = ctx.createRadialGradient(cx, cy, 1, cx, cy, radius); 
 
    radialGradient.addColorStop(0, 'rgba(0,0,0,1)'); 
 
    radialGradient.addColorStop(.65, 'rgba(0,0,0,1)'); 
 
    radialGradient.addColorStop(1, 'rgba(0,0,0,0)'); 
 
    ctx.beginPath(); 
 
    ctx.arc(cx,cy,radius,0,Math.PI*2); 
 
    ctx.fillStyle=radialGradient; 
 
    ctx.fill(); 
 
    ctx.globalCompositeOperation='source-atop'; 
 
    ctx.drawImage(img,0,0); 
 
    ctx.globalCompositeOperation='destination-over'; 
 
    ctx.fillStyle='black'; 
 
    ctx.fillRect(0,0,cw,ch); 
 
    ctx.restore(); 
 
} 
 

 

 
function handleMouseMove(e){ 
 

 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 

 
    draw(mouseX,mouseY,30); 
 

 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Move mouse to reveal image with "flashlight"</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>

Answer 3

@Bulent武拉尔，这是我的解决方案。但是我不能把这个圆圈变小，因为我不得不重新调整它的大小以适合屏幕，这与％不适用。

这个工作的唯一方法是增加很多“黑色，黑色，黑色”。这不是很令人愉快。

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-2000+"px"; 
 
     document.getElementById("followDiv").style.top = event.clientY-2000+"px"; 
 

 

 

 

 

 

 
    } 
 
    document.onmousemove = mouseMovement; 
 
</script>

html, body {margin: 0; height: 100%; overflow: hidden} 
 
     #followDiv { 
 
      /* background-color: lightblue; */ 
 
      height: 4000px; 
 
      width: 4000px; 
 
      position: absolute; 
 

 
      background: -webkit-radial-gradient(circle, rgba(248, 255, 252, 0),black); 
 
      background: -o-radial-gradient(circle, rgba(248, 255, 252, 0),black); 
 
      background: -moz-radial-gradient(circle, rgba(248, 255, 252, 0),black); 
 
      background: radial-gradient(circle, rgba(248, 255, 252, 0),black); 
 
     }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
    
 
</head> 
 
<body> 
 
    <p id="x_show">0</p> 
 
    <p id="y_show">0</p> 
 
    <div id="followDiv"></div> 
 
</body>