Question

我正在尝试使用与Canvas flashlight effect上的图像效果非常相似的图像效果，而不是前面层只是一种颜色，我希望它是一个图像。抓住代码@Kaiido回答我试图改变但是当我把一个模式放在事件中时它会给我一个错误。

$('.number_format').on('keyup', function(){
    $(this).val(function(index, value) {
        return value.replace(/[^0-9.]/g, "").replace(/\B(?=([0-9.]{3})+(?![0-9.]))/g, ",");
    });
});

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

Answer 1

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

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

Canvas手电筒效果与分层图像

1 个答案: