Thay đổi độ mờ của một khu vực dựa trên vị trí chuột

Question

Có thể thay đổi độ mờ của nền nhưng chỉ bên dưới vùng con trỏ (ví dụ một vòng tròn nhỏ màu trắng)? Tôi đang nghĩ về nó một chút giống như một bản đồ nhiệt cơ bản nhưng nhiệt không ở lại - nó chỉ theo con trỏ.

Tại thời điểm tôi có sau

HTML:

html { 
    background-color: #000; 
    width: 100%; 
    height: 100%; 
} 

JS:

$(document).mousemove(function(event){ 
    var i = event.pageX.toPrecision(1)/1000; 
    $("html").css('opacity', i) 
}); 

Xin lỗi đây có lẽ là một điểm khởi đầu rất cơ bản. Tôi có cần sử dụng canvas không?

Answer 1

Bạn có thể làm điều đó bằng svg

gì tôi đã làm: -

tôi đặt hai hình ảnh tương tự với cùng phối hợp tác, chiều cao và chiều rộng và đã đưa ra một hình tròn clip-path đến chồng lên (trong đó có đầy đủ opacity) khi chuột di chuyển vị trí của vòng tròn cũng thay đổi

$('svg').on('mousemove',function(e){ 
 
    $('.a').attr('cx',e.pageX).attr('cy',e.pageY) 
 
     
 
})

.one{ 
 
    opacity:.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg width="500" height="500"> 
 
    <clippath id="clip" > 
 
     <circle cx="50" cy="50" r="50" class="a"/> 
 
    </clippath> 
 
    
 
    <image xlink:href="https://images.unsplash.com/photo-1474575981580-1ec7944df3b2?dpr=1&auto=format&fit=crop&w=1500&h=934&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" x="0" y="0" class="one"/> 
 
     
 
    <image xlink:href="https://images.unsplash.com/photo-1474575981580-1ec7944df3b2?dpr=1&auto=format&fit=crop&w=1500&h=934&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" x="0" y="0" clip-path="url(#clip)"/> 
 
    </svg>