JavaScript/HTML透明径向渐变问题：光线投射光源无法显示透明效果

问题核心 #

你当前使用的纯黑→纯白不透明渐变会完全覆盖下方的迷宫线条，和需求（光照区透视线条、黑暗区遮挡）逻辑相反。需要反转透明度逻辑，并结合正确的绘制流程来实现遮罩效果。

解决方案 #

1. 调整渐变的透明度逻辑

将原来的纯色渐变替换为透明到不透明的黑色渐变，或者利用合成模式实现“挖洞”效果：

2. 基于离屏画布的精细光照实现（适配1000条光线场景）

如果你需要用1000条光线模拟光照范围，推荐用离屏画布绘制光照蒙版，再与主画布合成：

// 创建离屏画布用于生成光照蒙版
const maskCanvas = document.createElement('canvas');
const maskCtx = maskCanvas.getContext('2d');
maskCanvas.width = this.ctx.canvas.width;
maskCanvas.height = this.ctx.canvas.height;

// 初始化蒙版为全黑（遮挡所有内容）
maskCtx.fillStyle = 'black';
maskCtx.fillRect(0, 0, maskCanvas.width, maskCanvas.height);

// 设置合成模式：绘制内容会"擦除"蒙版（露出下方内容）
maskCtx.globalCompositeOperation = 'destination-out';

// 循环绘制每条光线的渐变"挖洞"
for (let i = 0; i < this.rays.length; i++) {
  const x = this.rays[i].x;
  const y = this.rays[i].y;
  const radius = this.circularRayRadius;
  // 创建径向渐变：中心不透明（擦除蒙版），边缘透明（保留蒙版）
  const gradient = maskCtx.createRadialGradient(x, y, 0, x, y, radius);
  gradient.addColorStop(0, 'rgba(255,255,255,1)');
  gradient.addColorStop(1, 'rgba(255,255,255,0)');
  
  maskCtx.fillStyle = gradient;
  // 绘制渐变覆盖区域（用矩形确保覆盖整个渐变范围）
  maskCtx.fillRect(x - radius, y - radius, radius * 2, radius * 2);
}

// 将蒙版绘制到主画布，完成光照效果
this.ctx.drawImage(maskCanvas, 0, 0);

3. 简化版圆形光源（无需多光线）

如果只需要鼠标位置的圆形光源，直接在迷宫上方绘制遮罩渐变即可：

// 先绘制完整的迷宫线条
// ... 你的迷宫stroke代码 ...

// 获取鼠标坐标（替换为你的实际鼠标位置逻辑）
const mouseX = 你的鼠标X;
const mouseY = 你的鼠标Y;
const radius = 200;

// 创建径向渐变：中心透明（显示迷宫），边缘黑色（遮挡迷宫）
const gradient = this.ctx.createRadialGradient(mouseX, mouseY, 0, mouseX, mouseY, radius);
gradient.addColorStop(0, 'rgba(0,0,0,0)');
gradient.addColorStop(1, 'rgba(0,0,0,1)');

// 绘制渐变遮罩覆盖整个画布
this.ctx.fillStyle = gradient;
this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);

原理说明 #

• 原来的纯白渐变会覆盖下方内容，我们需要的是遮罩逻辑：用黑色遮挡黑暗区域，透明区域让迷宫线条透出。
• destination-out合成模式可以在蒙版画布上“挖”出光照区域，最终将蒙版盖在迷宫上，就能实现光照显迷宫、黑暗挡迷宫的效果。

内容的提问来源于stack exchange，提问作者Ben