Javascript HTML画布聚光灯效果
假设我有以下代码Javascript HTML画布聚光灯效果,javascript,html,canvas,Javascript,Html,Canvas,假设我有以下代码 //找出窗外的高度和宽度 wwidth=$（窗口）.width（）； wheight=$（窗口）.height（）； //将画布放置在当前窗口上 $（“正文”）。追加（$（“”）； var context=document.getElementById（“test”）.getContext（“2d”）； context.canvas.width=wwidth； context.canvas.height=wheight； //把画布漆成黑色。 context.fillStyl
//找出窗外的高度和宽度
wwidth=$（窗口）.width（）；
wheight=$（窗口）.height（）；
//将画布放置在当前窗口上
$（“正文”）。追加（$（“”）；
var context=document.getElementById（“test”）.getContext（“2d”）；
context.canvas.width=wwidth；
context.canvas.height=wheight；
//把画布漆成黑色。
context.fillStyle='#000'；
clearRect（0,0，context.canvas.width，context.canvas.height）；
fillRect（0,0，context.canvas.width，context.canvas.height）；
//在Mousemove上，在鼠标周围创建“手电筒”，以便看穿画布
$（窗口）.mousemove（函数（事件）{
x=event.pageX；
y=event.pageY；
半径=50；
context=document.getElementById（“测试”）.getContext（“2d”）；
//把画布涂成黑色。相反，它会把它画成白色？！
//context.fillStyle='#000'；
//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，radius）；
径向梯度。添加色阻（0，'rgba（255255,1'）；
径向梯度。加色停止（1，'rgba（0,0,0'）；
context.globalCompositeOperation=“目标输出”；
context.fillStyle=径向梯度；
弧（x，y，半径，0，数学PI*2，false）；
context.fill（）；
closePath（）；
});
测试
此代码适用于我：
x = event.pageX;
y = event.pageY;
radius = 10;
context = canvas.getContext("2d");
context.fillStyle = "black";
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();
var radialGradient= context.createRadialGradient(x,y,1,x,y,radius);
radialGradient.addColorStop(0,"rgba(255,255,255,1");
radialGradient.addColorStop(1,"rgba(0,0,0,1)");
//context.globalCompositeOperation = "destination-out";
context.fillStyle = radialGradient;
context.arc(x, y, radius, 0, Math.PI*2, false);
context.fill();
context.closePath();
这行代码似乎把它搞乱了context.globalCompositeOperation=“destination out”
代码中还有一些毫无意义的行，如填充rect之前的起始路径和填充路径之后的fill（）函数。您可以使用合成来创建手电筒效果：
- 清理画布
- 创建用作分隔缝的径向渐变
- 填充径向渐变
- 使用
合成绘制背景图像。图像将仅显示在径向渐变内
使用 var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
函数reOffset（）{
var BB=canvas.getBoundingClientRect（）；
offsetX=BB.left；
offsetY=BB.top；
}
var offsetX，offsetY；
reOffset（）；
onscroll=函数（e）{reOffset（）；}
onresize=函数（e）{reOffset（）；}
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
var半径=30；
var img=新图像（）；
img.onload=函数（）{
抽签（150150,30）；
}
img.src=https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg'
功能图（cx、cy、半径）{
ctx.save（）；
ctx.clearRect（0,0，cw，ch）；
var radialGradient=ctx.createRadialGradient（cx，cy，1，cx，cy，radius）；
径向梯度。addColorStop（0，'rgba（0,0,0,1'）；
径向梯度.addColorStop（.65，'rgba（0,0,0,1'）；
径向梯度。加色停止（1，'rgba（0,0,0'）；
ctx.beginPath（）；
ctx.弧（cx，cy，半径，0，数学PI*2）；
ctx.fillStyle=径向梯度；
ctx.fill（）；
ctx.globalCompositeOperation='source-top'；
ctx.drawImage（img，0,0）；
ctx.globalCompositeOperation='destination-over'；
ctx.fillStyle='black'；
ctx.fillRect（0,0，cw，ch）；
ctx.restore（）；
}
功能手柄移动（e）{
//告诉浏览器我们正在处理此事件
e、 预防默认值（）；
e、 停止传播（）；
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
抽签（mouseX，mouseY，30）；
}body{背景色：象牙；}
#画布{边框：1px纯红；}
移动鼠标以“手电筒”显示图像
context.globalCompositeOperation = 'xor';
// Paint the canvas black.
context.fillStyle = '#000';
context.clearRect(0, 0, width, height);
context.fillRect(0, 0, width, height);
// Paint a black circle around x, y.
context.beginPath();
context.arc(x, y, spotlightRadius, 0, 2 * Math.PI);
context.fillStyle = '#000';
context.fill();
// With xor compositing, the result is a circular hole.
var gradient = context.createRadialGradient(x, y, 0, x, y, spotlightRadius);
gradient.addColorStop(0, 'rgba(0, 0, 0, 1)');
gradient.addColorStop(0.9, 'rgba(0, 0, 0, 1)');
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
context.fillStyle = gradient;
context.fillRect(x - spotlightRadius, y - spotlightRadius,
2 * spotlightRadius, 2 * spotlightRadius);