用途:为深色界面提供单色、程序化的氛围背景层,呈现放大的方形像素与可见的有序抖动(Bayer 风格),形成有机波浪或云团状明暗块,而非彩色渐变或随机噪点。
主要能力:近黑底色配炭灰中间调、柔和灰阶堆积与少量白色高光;4x4 Bayer 抖动或等效有序阈值;带暗角,使较亮区域集中在中央或偏离轴线;支持缓慢漂移的动态效果,并遵循 prefers-reduced-motion 减少动效。
使用方式:在页面放置 <canvas class="dither-background" data-dither-background></canvas>,用 CSS 将其固定铺满视口、z-index 置底、pointer-events: none,前景内容设 position: relative 与更高 z-index。通过 initDitherBackground(canvas, options) 初始化,可调 cellSize(建议 5px-10px)、maxDpr(默认 1.5)、palette 等参数;返回清理函数用于取消动画与移除 resize 监听。
适用场景:框架式 UI、主视觉文案或数据叠加层背后的氛围背景。
限制与注意:保持单色克制,避免彩虹渐变、彩色噪点、无抖动结构的模糊光斑、细小颗粒或逐帧闪烁噪声;前景对比度与排版需保持清晰,避免整屏等亮。性能不足时优先增大 cellSize 或限制 maxDpr。资料未提供安装命令、收费与平台信息。