离屏一 · 缝隙遮罩
线性渐变柔化每条亮缝边缘,destination-in 做横向衰减,destination-out 挖出窗框十字梃。
纯 Canvas 2D 多层离屏合成:百叶窗缝隙、窗框遮挡与暖色径向光晕,配合斜切变换模拟阳光入射角。
页面内容在画布下方,光影以 multiply 叠加以保留纸张与文字质感。
午后斜阳穿过百叶,亮带随微风轻轻错动,缝隙宽度随“呼吸”缓慢开合。本页为独立单文件演示,无外部依赖,
动画由 requestAnimationFrame 驱动。
可通过右上角按钮暂时关闭叠加层,便于阅读或对比有无光影时的版式。
线性渐变柔化每条亮缝边缘,destination-in 做横向衰减,destination-out 挖出窗框十字梃。
径向渐变模拟色温,用 destination-in 与缝隙形状相交后叠到主画布上。