本文介绍如何通过 globalCompositeOperation 配合 createRadialGradient，在 HTML5 Canvas 中正确渲染可透光的径向渐变，使光照区域（白→透明）保留底层图形可见性，而阴影区域（黑）自然遮蔽内容。
本文介绍如何通过 `globalcompositeoperation` 配合 `createradialgradient`，在 html5 canvas 中正确渲染可透光的径向渐变，使光照区域（白→透明）保留底层图形可见性，而阴影区域（黑）自然遮蔽内容。
在使用 Canvas 实现光线投射（ray casting）式动态光照（如迷宫中的手电筒效果）时，一个常见误区是：仅依赖颜色渐变（如 "white" → "black"）却忽略透明度通道与混合模式，导致渐变覆盖而非叠加——结果就是所有线条被不透明的白色“糊住”，完全看不到底层绘制的墙壁或路径。
关键问题在于："white" 和 "black" 默认是不透明色（即 #FFFFFF 和 #000000），即使你希望“白色代表光”、“黑色代表暗”，若未启用透明度或合理混合，Canvas 会直接用纯色填充，遮挡一切。
✅ 正确解法：组合使用透明色 + 混合模式
-
定义带 Alpha 的渐变色
将colorStop0改为半透明白色（如"rgba(255, 255, 255, 0.8)"），colorStop1改为全透明黑色（如"rgba(0, 0, 0, 0)"），而非不透明黑。这样渐变本身具备从“亮而微透”到“完全不可见”的过渡：
gradient.addColorStop(0, "rgba(255, 255, 255, 0.8)"); // 亮区：透光 gradient.addColorStop(1, "rgba(0, 0, 0, 0)"); // 暗区：完全透明，不遮挡
-
设置混合模式（核心步骤）
在绘制渐变前，将globalCompositeOperation设为"lighter"（叠加发光）或"screen"（更柔和的提亮），但针对「光照遮罩」需求，推荐使用：
ctx.globalCompositeOperation = "destination-out"; // ✅ 推荐：用渐变“擦除”黑暗区域 // 或 ctx.globalCompositeOperation = "overlay"; // 需配合预设背景色
⚠️ 但最契合你场景（1000 条射线组成圆形光晕，需让光区透出、暗区隐去）的是：
// 步骤一：先绘制所有迷宫线条（墙壁等）
drawWalls(); // ctx.stroke() 多次
// 步骤二：开启“遮罩擦除”模式 —— 黑色区域将清除已有像素，白色区域保留
ctx.globalCompositeOperation = "destination-out";
// 步骤三：用径向渐变（中心白→边缘全透明黑）“挖空”黑暗区
for (let i = 0; i < this.rays.length; i++) {
const { x, y } = this.rays[i];
const radius = this.circularRayRadius;
const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
gradient.addColorStop(0, "rgba(0, 0, 0, 0)"); // 中心：完全透明（不擦除）
gradient.addColorStop(1, "rgba(0, 0, 0, 1)"); // 边缘：纯黑（彻底擦除 → 显示为黑？不对！）
// ❌ 错误：destination-out 下纯黑会擦除，但你想保留中心光区
// ✅ 正确思路：改用 “source-over” + 透明渐变，并叠加在黑色半透明层上
}? 更稳健的生产级方案（推荐）：
// 1. 绘制所有场景（墙壁、角色等）
drawScene();
// 2. 创建临时离屏 canvas（lightCanvas）用于光照层
const lightCtx = lightCanvas.getContext("2d");
lightCtx.clearRect(0, 0, w, h);
// 3. 在光照层上绘制 1000 条渐变射线（每条：中心透明白 → 边缘透明黑）
for (let i = 0; i < this.rays.length; i++) {
const { x, y } = this.rays[i];
const gradient = lightCtx.createRadialGradient(x, y, 0, x, y, radius);
gradient.addColorStop(0, "rgba(255, 255, 255, 0.6)");
gradient.addColorStop(1, "rgba(0, 0, 0, 0.9)");
lightCtx.beginPath();
lightCtx.arc(x, y, radius, 0, Math.PI * 2);
lightCtx.fillStyle = gradient;
lightCtx.fill();
}
// 4. 将光照层以 “screen” 模式合成到主画布（自动提亮+透光）
ctx.globalCompositeOperation = "screen";
ctx.drawImage(lightCanvas, 0, 0);
ctx.globalCompositeOperation = "source-over"; // 重置? 注意事项：
- 避免在循环中频繁修改
globalCompositeOperation，性能开销大；优先用离屏 canvas 分层处理； -
"screen"混合模式天然支持透光叠加：白色增强亮度，黑色无影响，灰阶部分提亮，完美模拟光源； - 若需“黑暗中仅照亮局部”，可先用全黑矩形
fillRect()覆盖画布，再用"lighter"或"screen"绘制透明渐变光斑； - 测试时用
rgba(255,0,0,0.3)等高对比色调试渐变范围，确认透明过渡是否生效。
总结：透明径向渐变 ≠ 仅改颜色字符串，而是透明度（alpha）+ 混合模式（composite）+ 分层策略三位一体。用好 globalCompositeOperation = "screen" 或 "lighter"，配合 rgba() 渐变色，即可让千条射线真正成为“可穿透的光”，而非“不透明的面纱”。
