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

非画布方式是：

将页面背景设置为黑色
使用＆＃39; border-radius：50％;＆＃39;
将此div的背景设置为图像
使用背景位置移动以移动鼠标

修改

使用box-shadow
软化边缘的最后一次触摸

＆＃13;
＆＃13;
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;
＆＃13;
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; }
＆＃13;
<p id="x_show">0</p> <p id="y_show">0</p> <div id="followDiv"></div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

@Bulent Vural，这是我的解决方案。但是，我无法获得这个圈子＆＃39;较小的＆＃39;因为我必须重新调整它的大小以适应屏幕，因为它不能与％＆＃t合作。

唯一可行的方法是增加很多＆＃34;黑色，黑色，黑色＆＃34;。这并不令人愉快。

＆＃13;

    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>

＆＃13;

 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);
        }

＆＃13;

<!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>

＆＃13;

Answer 3

我认为这可以帮到你想要的东西。

＆＃13;

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);

}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Javascript - 鼠标关注+照明？

3 个答案: