キャンバスの懐中電灯の効果

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>