方案六:Canvas 2D 百叶窗光线投射

纯 Canvas 2D 多层离屏合成:百叶窗缝隙、窗框遮挡与暖色径向光晕,配合斜切变换模拟阳光入射角。 页面内容在画布下方,光影以 multiply 叠加以保留纸张与文字质感。

午后斜阳穿过百叶,亮带随微风轻轻错动,缝隙宽度随“呼吸”缓慢开合。本页为独立单文件演示,无外部依赖, 动画由 requestAnimationFrame 驱动。

可通过右上角按钮暂时关闭叠加层,便于阅读或对比有无光影时的版式。

离屏一 · 缝隙遮罩

线性渐变柔化每条亮缝边缘,destination-in 做横向衰减,destination-out 挖出窗框十字梃。

离屏二 · 暖色光晕

径向渐变模拟色温,用 destination-in 与缝隙形状相交后叠到主画布上。