캔버스 손전등 효과

Question

다른 질문에서이 코드를 발견했지만 완전히 대답하지 못했습니다. 캔버스가 항상 검은 색이되도록 마우스를 어떻게 만들 수 있습니까? 그리고 마우스가 손전등 효과를 만들어 캔버스 밑에 무엇이 있는지 확인한 다음 다시 채 웁니다. 이미지가 아닌 전체 페이지에서이 효과를 얻으 려합니다. 주어진 답은 이미지 위에 작성한 것이지만 전체 페이지에서 어떻게 작성해야할지 모르겠습니다.

여기

난에서 그것을 볼 수있는 질문 : 내 말은 효과가 전체 페이지 이상을 제외하고,이처럼

// Find out window height and width 
 
wwidth = $(window).width(); 
 
wheight = $(window).height(); 
 

 
// Place Canvas over current Window 
 
$("body").append($("<canvas id='test' style='position:absolute; top:0; left:0;'></canvas>")); 
 
var context = document.getElementById("test").getContext("2d"); 
 
context.canvas.width = wwidth; 
 
context.canvas.height = wheight; 
 

 
// Paint the canvas black. 
 
context.fillStyle = '#000'; 
 
context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
 
context.fillRect(0, 0, context.canvas.width, context.canvas.height); 
 

 
// On Mousemove, create "Flashlight" around the mouse, to see through the canvas 
 
$(window).mousemove(function(event){ 
 
    x = event.pageX; 
 
    y = event.pageY; 
 
    radius = 50; 
 
    context = document.getElementById("test").getContext("2d"); 
 

 
    // Paint the canvas black. Instead it will draw it white?! 
 
    //context.fillStyle = '#000'; 
 
    //context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
 
    //context.fillRect(0, 0, context.canvas.width, context.canvas.height); 
 

 
    context.beginPath(); 
 
    radialGradient = context.createRadialGradient(x, y, 1, x, y, radius); 
 
    radialGradient.addColorStop(0, 'rgba(255,255,255,1)'); 
 
    radialGradient.addColorStop(1, 'rgba(0,0,0,0)'); 
 

 
    context.globalCompositeOperation = "destination-out"; 
 

 
    context.fillStyle = radialGradient; 
 
    context.arc(x, y, radius, 0, Math.PI*2, false); 
 
    context.fill(); 
 
    context.closePath(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>Test</div>

: HTML canvas spotlight effect 다음은 코드입니다

Answer 1

코드를 너무 많이 수정하지 않고을 재설정하면됩니다.3210을 보통 모드로 설정합니다 (예 : "source-over").

또한 고정 캔버스를 배치하고 mousemove 이벤트의 clientX 및 clientY 소품을 들었습니다.

// Find out window height and width 
 
wwidth = $(window).width(); 
 
wheight = $(window).height(); 
 

 
// Place Canvas over current Window 
 
$("body").append($("<canvas id='test' style='position:fixed; top:0; left:0;'></canvas>")); 
 
var context = document.getElementById("test").getContext("2d"); 
 
context.canvas.width = wwidth; 
 
context.canvas.height = wheight; 
 

 
// Paint the canvas black. 
 
context.fillStyle = '#000'; 
 
context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
 
context.fillRect(0, 0, context.canvas.width, context.canvas.height); 
 

 
// On Mousemove, create "Flashlight" around the mouse, to see through the canvas 
 
$(window).mousemove(function(event){ 
 
    x = event.clientX; 
 
    y = event.clientY; 
 
    radius = 50; 
 
    context = document.getElementById("test").getContext("2d"); 
 

 
    // first reset the gCO 
 
    context.globalCompositeOperation = 'source-over'; 
 
    // Paint the canvas black. 
 
    context.fillStyle = '#000'; 
 
    context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
 
    context.fillRect(0, 0, context.canvas.width, context.canvas.height); 
 

 
    context.beginPath(); 
 
    radialGradient = context.createRadialGradient(x, y, 1, x, y, radius); 
 
    radialGradient.addColorStop(0, 'rgba(255,255,255,1)'); 
 
    radialGradient.addColorStop(1, 'rgba(0,0,0,0)'); 
 

 
    context.globalCompositeOperation = "destination-out"; 
 

 
    context.fillStyle = radialGradient; 
 
    context.arc(x, y, radius, 0, Math.PI*2, false); 
 
    context.fill(); 
 
    context.closePath(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<p> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in dictum sem. In scelerisque turpis ut pretium feugiat. Donec ac erat ante. Nam facilisis quis orci vel tincidunt. Aliquam eu dolor quis tellus pretium euismod at vel ante. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur a est quis enim rutrum bibendum eu eget ante. Cras id placerat justo, ut rutrum turpis. Vestibulum ac auctor magna. Integer id magna in est semper dapibus in tristique dolor. Sed aliquam fermentum eros non molestie. Donec hendrerit tristique orci, quis scelerisque quam sollicitudin in. Nunc ut suscipit sem. Etiam turpis leo, viverra a tristique in, molestie mattis metus. Nulla consequat orci non dapibus maximus. 
 
</p> 
 
<p> 
 
Nunc eget enim diam. Etiam euismod rutrum bibendum. Etiam accumsan turpis tortor, ac elementum purus convallis et. Fusce fringilla turpis sit amet dignissim suscipit. Vestibulum ante orci, facilisis vel neque vel, molestie vulputate libero. Nullam fringilla mauris vitae velit rutrum varius. Nunc eget cursus ante. Quisque vel ex nec eros rutrum consequat a in nunc. Phasellus ornare dui turpis, quis feugiat nibh fermentum in. Nullam scelerisque nunc sed dui tempus aliquam. Vestibulum at ligula feugiat, egestas erat a, malesuada risus. 
 
</p> 
 
<p> 
 
Pellentesque placerat dolor a porttitor molestie. Fusce augue elit, congue in interdum vehicula, iaculis vitae nisl. Mauris viverra magna arcu. Etiam egestas mi ante, at euismod nibh iaculis vitae. Aliquam at velit a odio aliquam posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin auctor vel sem eget faucibus. 
 
</p> 
 
<p> 
 
In eget suscipit arcu. Proin et mollis arcu. Praesent luctus mattis orci, eget pulvinar lacus varius nec. Phasellus dignissim eleifend dolor, id accumsan ligula sollicitudin vel. Sed id elementum ex. Fusce tempor nisl at purus imperdiet porttitor. Nulla ac blandit leo. Nulla vitae consequat arcu. Sed luctus maximus justo eget pellentesque. Nullam vel interdum tortor. 
 
</p> 
 
<p> 
 
Curabitur in nulla ac tortor iaculis mollis. Donec a volutpat mi, in dictum metus. Morbi ac odio porttitor, laoreet magna at, consequat risus. Aenean sed imperdiet leo, id ornare orci. Phasellus pharetra lobortis rhoncus. Suspendisse blandit, arcu vitae viverra tempus, lorem nisl facilisis dolor, sodales tempus ligula ipsum sed nisl. Donec eu lacinia est. Nam id fermentum justo. Proin rhoncus egestas lacus in facilisis. Sed mattis ut arcu sed fermentum. Pellentesque at urna est. Proin porttitor ante libero, nec laoreet nisl molestie eget. Ut nec justo feugiat, lacinia tellus convallis, hendrerit diam. Etiam dignissim augue augue, vel venenatis lorem fermentum eget. Ut non commodo libero. 
 
</p></div>