如何在Canvas中实现透明径向渐变以模拟动态光照效果-html教程-PHP中文网

如何在Canvas中实现透明径向渐变以模拟动态光照效果

本文介绍通过Canvas的globalCompositeOperation属性配合径向渐变，实现可穿透显示底层线条的动态光源效果，解决纯色遮盖导致无法看见迷宫轮廓的问题。

本文介绍通过canvas的globalcompositeoperation属性配合径向渐变，实现可穿透显示底层线条的动态光源效果，解决纯色遮盖导致无法看见迷宫轮廓的问题。

在基于射线投射（ray casting）的2D光照系统中，常见的误区是仅依赖createRadialGradient()生成从白到黑的渐变，却忽略了Canvas默认的“覆盖式”绘制模式——即无论渐变中是否含透明度，只要未显式设置alpha通道或混合模式，所有绘制内容都会不透明地覆盖已有像素。你当前代码中colorStop0 = "white"和colorStop1 = "black"均为不透明色值（等价于"#FFFFFF"和"#000000"），因此即使视觉上呈现“由亮到暗”，实际每个像素的alpha值均为1，完全遮挡下方的迷宫墙壁线条。

要实现“光区内可见墙壁、暗区不可见”的真实感光照，关键不是让渐变自身变透明，而是改变绘制时的像素合成逻辑。推荐使用 ctx.globalCompositeOperation = "darken"：

// 在绘制光照渐变前设置混合模式
this.ctx.globalCompositeOperation = "darken";

// 创建并应用径向渐变（颜色仍可用纯白/纯黑）
const gradient = this.ctx.createRadialGradient(x, y, 0, x, y, radius);
gradient.addColorStop(0, "white");   // #FFFFFF → alpha=1，但"darken"会保留下方更暗的像素
gradient.addColorStop(1, "black");   // #000000 → 完全覆盖为黑，隐藏该区域内容

this.ctx.beginPath();
this.ctx.arc(x, y, radius, 0, Math.PI * 2);
this.ctx.fillStyle = gradient;
this.ctx.fill();

✅ 原理说明："darken" 模式对每个目标像素执行 result = min(source, destination) 的RGB分量比较。白色（255,255,255）与任何颜色比较均取后者，因此光心区域“透出”底层线条；黑色（0,0,0）则强制覆盖为黑，形成有效遮蔽。这恰好符合“亮处见墙、暗处隐匿”的光照语义。

Markdown Canvas

将Markdown文件转换为美观的HTML页面，适用于Canvas或浏览器查看。用于用户请求渲染、可视化、显示或分享Markdown文件时。

下载

⚠️ 重要注意事项：

必须在每次绘制光照前重置 globalCompositeOperation，否则会影响后续所有绘制（如UI、文字）。建议绘制后恢复默认值：
this.ctx.globalCompositeOperation = "source-over";
若需更精细控制（如半透明衰减），可改用带alpha的颜色（如 "rgba(255,255,255,0.3)"）配合 "source-over" 模式，但性能略低且需多层叠加；
1000条射线无需逐条绘制渐变圆——应统一绘制一个覆盖全部射线范围的大渐变圆盘，大幅提升渲染效率。

最终效果：玩家鼠标所在位置呈现明亮光晕，可清晰辨识迷宫结构；远离光心的区域逐渐沉入黑暗，墙壁线条自然隐去，真正实现动态、可交互的2D光照体验。