Javascript 帆布手电筒效果与分层图像

我试图做一个图像效果非常类似的一个，但是，而不是前一层只是一种颜色，我希望它是一个图像。 抓取代码@kaido回答，我试图改变，但当我将a模式放入事件中时，它会给我一个错误

//找出窗外的高度和宽度
wwidth=$（窗口）.width（）；
wheight=$（窗口）.height（）；
//将画布放置在当前窗口上
var ctx=document.getElementById（“画布”），
context=ctx.getContext（'2d'），
img=新图像；
img.src=”http://i.imgur.com/bnAEEXq.jpg";
img.onload=函数（）{
context.canvas.width=wwidth；
context.canvas.height=wheight；
//把画布漆成黑色。
context.fillStyle=context.createPattern（这是“无重复”）；
clearRect（0,0，context.canvas.width，context.canvas.height）；
fillRect（0,0，context.canvas.width，context.canvas.height）；
//在Mousemove上，在鼠标周围创建“手电筒”，以便看穿画布
$（窗口）.mousemove（函数（事件）{
x=event.clientX；
y=event.clientY；
半径=100；
context=document.getElementById（“画布”）.getContext（“2d”）；
//首先重置gCO
context.globalCompositeOperation='source over'；
//用初始图像绘制画布。
//context.fillStyle=context.createPattern（这是“无重复”）；
context.fillStyle=“#ffffff”；
clearRect（0,0，context.canvas.width，context.canvas.height）；
fillRect（0,0，context.canvas.width，context.canvas.height）；
context.beginPath（）；
radialGradient=context.createRadialGradient（x，y，1，x，y，100）；
径向梯度。添加色阻（0，'rgba（255255,1'）；
径向梯度。加色停止（1，'rgba（0,0,0'）；
context.globalCompositeOperation=“目标输出”；
context.fillStyle=径向梯度；
弧（x，y，半径，0，数学PI*2，false）；
context.fill（）；
closePath（）；
});
}

正文{
保证金：0；
}
#帆布{
位置：固定；
排名：0；
左：0；
背景图像：url（'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calgary-bridge-1943.jpg');
背景尺寸：封面；
背景重复：无重复；
}

---

调用

context.createPattern

时，需要使用先前分配的

img

，而不是

此

//找出窗外的高度和宽度
wwidth=$（窗口）.width（）；
wheight=$（窗口）.height（）；
//将画布放置在当前窗口上
var ctx=document.getElementById（“画布”），
context=ctx.getContext（'2d'），
img=新图像；
img.src=”http://i.imgur.com/bnAEEXq.jpg";
img.onload=函数（）{
context.canvas.width=wwidth；
context.canvas.height=wheight；
//把画布漆成黑色。
context.fillStyle=context.createPattern（这是“无重复”）；
clearRect（0,0，context.canvas.width，context.canvas.height）；
fillRect（0,0，context.canvas.width，context.canvas.height）；
//在Mousemove上，在鼠标周围创建“手电筒”，以便看穿画布
$（窗口）.mousemove（函数（事件）{
x=event.clientX；
y=event.clientY；
半径=100；
context=document.getElementById（“画布”）.getContext（“2d”）；
//首先重置gCO
context.globalCompositeOperation='source over'；
//用初始图像绘制画布。
context.fillStyle=context.createPattern（img，“无重复”）；
//context.fillStyle=“#ffffff88”；
clearRect（0,0，context.canvas.width，context.canvas.height）；
fillRect（0,0，context.canvas.width，context.canvas.height）；
context.beginPath（）；
radialGradient=context.createRadialGradient（x，y，1，x，y，100）；
径向梯度。添加色阻（0，'rgba（255255,1'）；
径向梯度。加色停止（1，'rgba（0,0,0'）；
context.globalCompositeOperation=“目标输出”；
context.fillStyle=径向梯度；
弧（x，y，半径，0，数学PI*2，false）；
context.fill（）；
closePath（）；
});
}

正文{
保证金：0；
}
#帆布{
位置：固定；
排名：0；
左：0；
背景图像：url（'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calgary-bridge-1943.jpg');
背景尺寸：封面；
背景重复：无重复；
}

您的错误是什么？我在控制台中没有看到任何错误……而且效果似乎在代码段//context.fillStyle=context.createPattern中起作用（这是“无重复”）；如果您取消注释这一行（而不是context.fillStyle=“#ffffffff”以便我们可以使用图像而不是颜色），它将给出错误：“未能在“CanvasRenderingContext2D”上执行“createPattern”。非常感谢。