实现探照灯效果

要实现探照灯效果，可以使用Canvas和JavaScript。以下是一个简单的实现过程：

1. 创建一个Canvas画布，并设置其宽度和高度。

const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);

2. 获取画布上下文，并设置全局alpha值为0.1，使得之前绘制的图形透明度降低。

const ctx = canvas.getContext('2d');
ctx.globalAlpha = 0.1;

3. 绘制一个黑色的矩形作为背景。

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);

4. 绘制一个圆形的路径，并使用clip()方法使得之后绘制的图形只出现在该圆形区域内。

const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = Math.min(centerX, centerY) * 0.8;

ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.clip();

5. 重新设置全局alpha值为1，使得之后绘制的图形完全不透明。

ctx.globalAlpha = 1;

6. 在圆形区域内绘制想要显示的对象，比如图片、文字等。

ctx.fillStyle = 'white';
ctx.font = 'bold 48px sans-serif';
ctx.textAlign = 'center';
ctx.fillText('Hello World!', centerX, centerY);

最终的效果就像是一个探照灯照在黑暗中，只显示出圆形区域内的内容。