Javascript - Maus folgen + Beleuchtung?

Question

Ich übe mein Javascript, also habe ich eine Folge-Maus-Funktion gemacht. Ich habe es funktioniert, aber jetzt habe ich eine neue Idee, die ich nicht sicher bin, ist möglich.

Gibt es eine Möglichkeit, einen '' orb of vision '' der Maus zu folgen, so dass alles in diesem Bereich sichtbar wird?. So ähnlich wie mit einer Taschenlampe, um einen kleinen Bereich zu sehen, in dem sich Ihre Maus befindet.

• HINWEIS: Ich bin für jemanden nicht zu fragen es für mich zu kodieren, sondern eine Erklärung, da ich neugierig bin, es selbst zu lernen, aber ich habe eine Richtschnur müssen! **

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

Eine nicht-Leinwand Weise sein würde:

• Set Seitenhintergrund schwarz
• Rund um die Grenzen von #followDiv mit 'border-radius: 50%;'
• der Hintergrund dieses Set zu Bild div
• Wiedergabe mit der Hintergrund-Position gegenüber Maus

bearbeiten zu verschieben: durch Erweichung der Kanten mit Box

• Einem letzten Schliff -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

Ich denke, das könnte Ihnen helfen, was Sie wollen.

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, das war meine Lösung. Aber ich kann den Kreis nicht "kleiner" bekommen, da ich ihn auf den Bildschirm anpassen muss, was bei% nicht funktioniert.

Die einzige Möglichkeit, dies zu tun, ist eine Menge "schwarz, schwarz, schwarz" hinzuzufügen. Was nicht sehr erfreulich ist.

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>