Javascript - マウスFollow + Lighting？

Question

私は自分のJavascriptを練習しているので、私はfollow-mouse機能を作った。私はそれを働かせましたが、今私は新しいアイデアを持っています。私は確信が持てません。

マウスの後ろに「眼球のオーブ」を作って、その領域のすべてがになるようにする方法はありますか？。あなたのマウスがある小さな領域を見るために、トーチを使用するようなもの。

• 注：私はそれを自分自身を学ぶために好奇心が強いんだけど、私はガイドラインを必要としないので、私は、私のためにそれをコーディングするために誰かではなく、説明を求めていませんよ！ **

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