Glyph Rain
字符雨落在暗下的页面上，每个雨滴头部都会拖动一片光照。用指针扫过雨流即可激起涌动。本页就是演示。
html-in-canvas
演示图片
Watch the rain light the photo below.
安装
本地演示保留原有效果，背景替换为 LeiBox 选定的画面。
查看原作者 ↗代码
源码与许可说明请查看原作者页面。
查看原作者 ↗API 参考
| 属性 | 类型 | 默认值 |
|---|---|---|
charset下落字形使用的字符，去重后生成字形图集。 | string | katakana + digits |
cell单个字形单元的尺寸，单位为 CSS 像素（8 至 64）。 | number | 15 |
color字符雨颜色，使用 [r, g, b]，范围为 0 至 1。 | [number, number, number] | [0.267, 0.455, 1] |
headColor明亮头部字形的颜色，使用 [r, g, b]，范围为 0 至 1。 | [number, number, number] | [0.169, 0.416, 1] |
speed下落速度，单位为屏幕高度/秒（0.05 至 3）。 | number | 0.2 |
speedVariance各字符列的速度差异（0 至 1）。 | number | 0.5 |
density每个周期生成的雨滴比例（0 至 1）。 | number | 0.15 |
trail渐隐拖尾的长度倍数（0.2 至 3）。 | number | 0.65 |
glow雨滴头部及其投射光线的亮度（0 至 3）。 | number | 1.75 |
mutate字形变为其他字符的速度（0 至 4）。 | number | 0 |
flicker光迹随机亮度闪烁的强度（0 至 1）。 | number | 0 |
layers前景层后方的视差雨层数量（1 至 3）。 | number | 2 |
dim未照亮页面的变暗程度（0 至 1），0 保持完整可读。 | number | 0.5 |
light雨滴照向页面的光照强度（0 至 3）。 | number | 2.8 |
lightRadius每个雨滴光池的半径，单位为 CSS 像素（20 至 600）。 | number | 240 |
lightHeight光源悬浮于页面上方的高度，单位为 CSS 像素；越高越柔和。 | number | 172 |
relief光照下页面的三维浮雕明暗强度（0 至 2）。 | number | 0.05 |
stir光标经过时搅动字符雨的强度（0 至 1），0 关闭。 | number | 0.7 |
stirRadius搅动影响光标两侧的距离，单位为 CSS 像素。 | number | 260 |
settle被搅动的尾流恢复自身节奏所需的秒数。 | number | 0.9 |
className应用到包装元素的 CSS 类。 | string |