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 с изображением
• Сыграть с фоном положении двигаться напротив мыши

Edit:

• Окончательное прикосновение смягчая края, используя окно -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>

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 Vural, это было мое решение. Но я не могу получить круг «меньше», так как я должен изменить его размер, чтобы он соответствовал экрану, который не будет работать с%.

Единственный способ, которым это работает, заключается в добавлении большого количества «черного, черного, черного». Это не очень приятно.

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>