具有分层图像的帆布手电筒效果

Question

我正在尝试制作与Canvas flashlight effect 上的非常相似的图像效果，但是，我希望它成为图像，而不是仅仅作为一种颜色的前层。 抓取代码@Kaiido 回答我已经尝试更改，但是当我将 a 模式放入事件中时，它给了我一个错误。

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

// Place Canvas over current Window 
var ctx = document.getElementById("canvas"),
context = ctx.getContext('2d'),
img = new Image;
img.src = "http://i.imgur.com/bnAEEXq.jpg";

img.onload = function(){
  context.canvas.width = wwidth;
  context.canvas.height = wheight;

  // Paint the canvas black.
  context.fillStyle = context.createPattern(this, "no-repeat");
  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 = 100;
    context = document.getElementById("canvas").getContext("2d");

    // first reset the gCO
    context.globalCompositeOperation = 'source-over';
    // Paint the canvas with the initial image.
    // context.fillStyle = context.createPattern(this, "no-repeat");
    context.fillStyle = "#ffffff";
    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, 100);
    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();
  });
}

body {
    		margin: 0;
    	}
      #canvas {
        position:fixed; 
        top:0; 
        left:0;
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calgary-bridge-1943.jpg');
        background-size: cover;
        background-repeat: no-repeat;
      }

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

Answer 1

当您调用context.createPattern 时，您需要使用您之前分配的img 而不是this。

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

// Place Canvas over current Window 
var ctx = document.getElementById("canvas"),
context = ctx.getContext('2d'),
img = new Image;
img.src = "http://i.imgur.com/bnAEEXq.jpg";

img.onload = function(){
  context.canvas.width = wwidth;
  context.canvas.height = wheight;

  // Paint the canvas black.
  context.fillStyle = context.createPattern(this, "no-repeat");
  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 = 100;
    context = document.getElementById("canvas").getContext("2d");

    // first reset the gCO
    context.globalCompositeOperation = 'source-over';
    // Paint the canvas with the initial image.
    context.fillStyle = context.createPattern(img, "no-repeat");
    //context.fillStyle = "#ffffff88";
    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, 100);
    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();
  });
}

body {
    		margin: 0;
    	}
      #canvas {
        position:fixed; 
        top:0; 
        left:0;
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calgary-bridge-1943.jpg');
        background-size: cover;
        background-repeat: no-repeat;
      }

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

或者，您也可以使用新的箭头函数来保留关键字this 的上下文：

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

// Place Canvas over current Window 
var ctx = document.getElementById("canvas"),
context = ctx.getContext('2d'),
img = new Image;
img.src = "http://i.imgur.com/bnAEEXq.jpg";

img.onload = function(){
  context.canvas.width = wwidth;
  context.canvas.height = wheight;

  // Paint the canvas black.
  context.fillStyle = context.createPattern(this, "no-repeat");
  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((event) => {
    x = event.clientX;
    y = event.clientY;
    radius = 100;
    context = document.getElementById("canvas").getContext("2d");

    // first reset the gCO
    context.globalCompositeOperation = 'source-over';
    // Paint the canvas with the initial image.
    context.fillStyle = context.createPattern(this, "no-repeat");
    //context.fillStyle = "#ffffff88";
    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, 100);
    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();
  });
}

body {
    		margin: 0;
    	}
      #canvas {
        position:fixed; 
        top:0; 
        left:0;
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calgary-bridge-1943.jpg');
        background-size: cover;
        background-repeat: no-repeat;
      }

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