我试图做一个非常类似于Canvas手电筒效果的图像效果,而不是让顶层只是一种颜色,我希望它是一种图像。抓住代码@Kaiido回答了我尝试更改的方法,但是当我将模式放在事件中时,它给我一个错误。
// 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>
您需要使用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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句