javascript - Canvas 手电筒效果

Question

我从这里的另一个问题中找到了这段代码，但似乎从未得到完全解答。我怎样才能使 Canvas 始终为黑色，并且鼠标生成手电筒效果以查看 Canvas 下方的内容，然后重新填充自身？我试图在整个页面而不是图像上实现这种效果。给出的答案是在图像上制作它，但我不知道如何在整个页面上制作它。我指的效果是这样的，除了整个页面:

这是我从以下位置找到的问题:HTML canvas spotlight effect 这是代码:

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

Answer 1

无需对代码进行太多修改，只需将 globalCompositeOperation 重置为正常模式，即 "source-over"，然后将其填充为黑色。

此外，我将 Canvas 设置为固定，并监听 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>