帆布手电筒效果

Question

我在这里找到了另一个问题的代码，但它似乎从未得到完全回答。如何制作它以使画布始终为黑色，并且鼠标会生成手电筒效果以查看画布下的内容，然后重新填充？我试图在整个页面上产生这种效果，而不是图像。给出的答案是在图像上进行此操作，但我不知道如何在整个页面上进行此操作。我的意思是这样的，除了整个页面：

以下是我发现的问题：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"，然后再将其填充为黑色。

另外，我将画布设置为固定并听取了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>