干扰线与条纹制作：贴纸/画笔绘制横条纹+叠加混合模式模拟扫描干扰

一、扫描线干扰的视觉机理与历史脉络

1.1 什么是扫描线干扰

扫描线干扰，指的是在图像或视频画面上叠加水平方向的明暗条纹，模拟早期CRT（阴极射线管）显示器在逐行扫描过程中产生的视觉伪影。这种干扰在模拟信号时代是“缺陷”，在数字时代却演变为一种刻意追求的视觉风格。它的核心视觉特征包括：等间距的水平暗线、条纹与画面内容的亮度耦合、以及条纹随时间缓慢滚动的动态感。

从视觉感知角度看，人眼对水平条纹的敏感度高于垂直条纹。根据视觉科学中的“对比敏感度函数”（Contrast Sensitivity Function, CSF），人眼在空间频率约2–5 cycles/degree时对比敏感度最高，而水平方向的敏感度峰值略高于垂直方向。这意味着相同间距、相同对比度的横条纹，比竖条纹更容易被察觉。本文评述：这一生理特性解释了为什么扫描线干扰在视觉上“存在感”很强，即使透明度很低也能被感知——设计时不能简单套用竖条纹的透明度参数。

1.2 CRT扫描机制简析

CRT显示器通过电子束逐行轰击荧光屏发光。以NTSC制式为例，每帧525行，采用2:1隔行扫描，场频约59.94Hz。电子束从左到右扫完一行后快速回扫至下一行起点，回扫期间不发光，形成行消隐期。正是这个消隐期，在画面上留下了周期性的暗线。PAL制式为625行/50场，SECAM类似。不同制式的行频不同：NTSC约15.734kHz，PAL约15.625kHz。

当摄像机拍摄CRT屏幕，或模拟信号在传输中受到干扰时，行消隐与场消隐的时序错位会产生更复杂的条纹——包括水平滚动的亮带（hum bar）和密集的扫描线纹理。这些现象后来被VHS录像带、老式电视机和监控摄像头进一步放大，成为“复古故障美学”的视觉语汇。

1.3 从缺陷到风格：扫描线美学的演变

扫描线美学经历了三个阶段的演变。第一阶段是“被动记录”：早期录像、监控画面中自然出现的扫描线，属于技术限制的副产品。第二阶段是“主动模拟”：2000年代后，随着数字影像普及，设计师开始在平面和视频中刻意叠加扫描线，营造怀旧感。第三阶段是“风格化重构”：2010年代至今，扫描线成为赛博朋克、蒸汽波（Vaporwave）、故障艺术的核心视觉元素，被赋予了“数字废墟”“信号失真”等文化隐喻。

笔者认为，扫描线干扰之所以经久不衰，根本原因在于它同时满足了两种心理需求：一是对模拟时代“温暖缺陷”的怀旧，二是对数字完美主义的反叛。它用一条条简单的横线，在光滑的数字画面上撕开了一道“不完美”的口子，这种张力正是其美学价值的来源。

1.4 相关研究脉络

在学术层面，扫描线干扰的研究分散在多个领域。显示技术领域关注CRT扫描伪影的消除与建模，如ITU-R BT.1702建议书对模拟电视信号伪影的描述。计算机图形学领域，Glitch Art的算法生成是近年热点，2019年后的多篇论文探讨了基于深度学习的故障效果生成。视觉感知领域，条纹对比敏感度的研究可追溯至Campbell与Robson 1968年的经典工作。人机交互领域，2021年后的研究开始关注扫描线对VR/AR沉浸感的影响。

本文评述：现有研究多聚焦于“如何消除扫描线”或“如何生成扫描线”，但缺少对“扫描线参数与视觉感受之间定量关系”的系统研究。本文尝试在第三节中建立条纹参数与视觉强度的映射关系，为工程实践提供可量化的设计依据。

二、横条纹的数学建模与参数化设计

2.1 条纹的基本数学描述

横条纹在数学上可以表示为一维周期函数沿垂直方向的延展。设图像高度为H，条纹周期为T（像素），则第y行的亮度调制量可以表示为：

L(y) = A · f(2πy / T + φ)

其中A为调制幅度，f为波形函数，φ为相位偏移。当f为正弦函数时，得到平滑的渐变条纹；当f为方波函数时，得到硬边条纹；当f为三角波时，得到线性渐变条纹。实际工程中，方波和正弦波最为常用。

条纹的占空比（duty cycle）D定义为亮区宽度与周期之比。D=0.5时亮暗等宽，D<0.5时暗线更宽，视觉上更“压抑”；D>0.5时亮线更宽，视觉上更“通透”。扫描线干扰通常采用D在0.3–0.5之间，以暗线为主。

2.2 关键参数及其视觉影响

参数	符号	典型范围	视觉影响
周期/间距	T	2–8 px	越小越密集，越大越稀疏
占空比	D	0.3–0.5	控制亮暗宽度比例
不透明度	α	0.05–0.30	控制干扰强度
模糊半径	r	0–1.5 px	软化边缘，模拟荧光扩散
滚动速度	v	0–60 px/s	控制动态感，过快会晕
条纹颜色	C	黑/深灰/深紫	影响色偏与氛围

上表参数范围为笔者基于大量工程实践与公开教程整理的经验值（模拟整合数据），并非来自单一实验。实际使用时需根据画面分辨率、观看距离和输出媒介调整。例如，4K画面下T=2px的条纹在正常观看距离下几乎不可见，需要放大到T=4–6px；而移动端小屏则需要T=2–3px。

2.3 分辨率与观看距离的耦合关系

条纹的视觉强度不仅取决于像素参数，还取决于观看条件。设屏幕像素密度为PPI，观看距离为d（英寸），则条纹的空间频率（cycles/degree）可近似为：

f_spatial ≈ (PPI / T) / (2 · d · tan(0.5°))

当f_spatial落在2–5 cycles/degree区间时，人眼对比敏感度最高，条纹最“扎眼”。设计时若希望条纹“若有若无”，应将其空间频率推高到8 cycles/degree以上（更密集）或降低到1 cycles/degree以下（更稀疏）。本文评述：这一公式为跨设备适配提供了理论依据——同一套条纹参数在不同PPI屏幕上视觉效果差异巨大，必须做响应式调整。

2.4 条纹的频谱特征

对方波条纹做傅里叶展开，其频谱包含基频及奇次谐波：

方波 = (4/π) · Σ [sin(2π(2k-1)y/T) / (2k-1)]，k=1,2,3...

这意味着方波条纹包含丰富的高频成分，在缩放或非整数倍采样时容易产生摩尔纹。正弦波条纹只有基频，缩放时更稳定。工程建议：如果条纹需要频繁缩放或在不同分辨率下复用，优先使用正弦波或对条纹图层开启轻微模糊（r=0.5–1px）来抑制高频。

三、贴纸绘制法：从零构建条纹图案

3.1 方法概述与适用场景

“贴纸绘制法”指的是在图像编辑软件（Photoshop、GIMP、Krita等）或矢量工具（Illustrator、Figma）中，手动创建条纹图案并作为独立图层叠加到目标画面上。这种方法的核心优势是可控性强、可复用性高，适合静态海报、封面设计、UI背景等场景。

贴纸法的基本流程是：新建条纹图层 → 绘制条纹图案 → 定义图案预设 → 填充或平铺 → 调整混合模式与不透明度。下面以Photoshop为例详细展开，其他软件操作逻辑类似。

3.2 Photoshop中的条纹图案制作步骤

步骤一：新建文档。创建一个正方形文档，尺寸建议为条纹周期的整数倍。例如周期T=4px，则新建8×8px或16×16px文档。分辨率设为72ppi（屏幕用）或300ppi（印刷用）。

步骤二：绘制条纹。使用矩形选框工具，在文档上半部分绘制一个高度为T×D的矩形，填充黑色。例如T=4px、D=0.5时，填充2px高的矩形。下半部分保持透明或填充白色。

步骤三：定义图案。执行“编辑 → 定义图案”，命名为“scanline_T4_D50”。此时图案被存入预设库，可在任意文档中调用。

步骤四：填充图案。在目标文档中新建图层，执行“编辑 → 填充 → 图案”，选择刚定义的图案。或者使用图层样式中的“图案叠加”，后者更灵活，可随时调整缩放和角度。

步骤五：调整混合模式。将条纹图层混合模式设为“叠加”或“柔光”，不透明度调至10%–25%。具体混合模式的选择见第五节。

3.3 矢量工具中的条纹制作

在Figma或Illustrator中，条纹可以通过“重复网格”（Repeat Grid）或“图案填充”实现。Figma的操作路径是：绘制一条水平线 → 选中后按Ctrl+D重复 → 调整间距 → 编组 → 作为覆盖层。矢量条纹的优势是无限缩放不失真，适合需要多尺寸输出的项目。

Figma社区有大量现成的扫描线组件，例如“Scanlines Effect”组件库，可以直接拖入使用。但笔者建议理解底层原理后自行制作，因为现成组件的参数往往固定，难以适配特殊需求。

3.4 条纹图案的变体设计

基础条纹之外，可以设计多种变体来丰富视觉效果：

• 渐变条纹：条纹亮度沿垂直方向渐变，模拟CRT屏幕中心亮、边缘暗的特性。
• 双频条纹：叠加两组不同周期的条纹，产生拍频效果，模拟信号干涉。
• 彩色条纹：使用RGB三色分离的条纹，模拟色差（chromatic aberration）。
• 噪点条纹：在条纹上叠加噪点纹理，模拟信号噪声。
• 弧形条纹：条纹沿球面变形，模拟CRT屏幕的曲面效果。

这些变体可以组合使用。例如“渐变+噪点+彩色”三合一，能做出非常逼真的老电视效果。但要注意，变体越多，图层管理越复杂，建议使用图层组和智能对象来组织。

3.5 贴纸法的优缺点分析

贴纸法的优点是：参数精确可控、可保存复用、适合批量处理、不依赖运行时性能。缺点是：动态效果需要手动制作多帧、修改参数需回到源文件、不适合实时交互场景。

本文评述：贴纸法适合“一次设计、多次使用”的场景，如品牌视觉系统、系列海报模板。但对于需要实时响应的交互项目（如网页动效、游戏UI），应优先考虑第四节的画笔法或第七节的着色器方案。

四、画笔绘制法：动态生成与纹理控制

4.1 方法概述

画笔绘制法指的是使用软件中的画笔工具（Brush Tool）或程序化绘制（如Canvas API、SVG、Shader）逐条绘制条纹。与贴纸法的“图案平铺”不同，画笔法更强调“逐笔控制”，适合需要手绘感、随机性或动态生成的场景。

在Photoshop中，画笔法通常结合“画笔预设”和“动态抖动”来实现自然条纹。在Web前端中，画笔法对应Canvas的lineTo/stroke或SVG的<line>元素。在着色器中，画笔法对应片段着色器中的条纹函数。

4.2 Photoshop画笔法操作步骤

步骤一：配置画笔。选择硬边圆画笔，大小设为1–2px，硬度100%。在“画笔设置”面板中，开启“形状动态”，将“大小抖动”设为0%，“角度抖动”设为0%。

步骤二：设置间距。在“画笔笔尖形状”中，将“间距”设为T像素（如4px）。这样连续绘制时，笔触会以T为间隔重复，形成虚线。

步骤三：绘制条纹。新建图层，按住Shift键从上到下绘制一条垂直线。由于间距设置，实际得到的是等间距的点列。然后将图层自由变换（Ctrl+T），垂直方向拉伸至覆盖全画面，点列即变为横条纹。

步骤四：添加抖动。复制条纹图层，稍微偏移1–2px，降低不透明度，模拟条纹的不均匀性。也可以使用“滤镜 → 杂色 → 添加杂色”来增加随机感。

4.3 Canvas API实现

在Web前端中，使用Canvas 2D API可以程序化绘制条纹。以下是一个基础示例：

const canvas = document.getElementById('scanline');
const ctx = canvas.getContext('2d');
const T = 4;        // 周期
const alpha = 0.15; // 不透明度

function drawScanlines() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = `rgba(0, 0, 0, ${alpha})`;
  for (let y = 0; y < canvas.height; y += T) {
    ctx.fillRect(0, y, canvas.width, T * 0.5);
  }
}
drawScanlines();

这段代码在Canvas上绘制了周期为4px、占空比0.5的黑色横条纹。实际项目中，可以将Canvas作为覆盖层（position: absolute; pointer-events: none）叠加在内容之上。

4.4 SVG实现

SVG的<pattern>元素非常适合定义可复用的条纹图案：

<svg width="100%" height="100%">
  <defs>
    <pattern id="scanline" width="4" height="4" patternUnits="userSpaceOnUse">
      <rect width="4" height="2" fill="black" opacity="0.15"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#scanline)"/>
</svg>

SVG方案的优点是矢量、可缩放、易于通过CSS控制。缺点是大量条纹在低端设备上可能影响渲染性能。

4.5 画笔法的随机性与自然感

纯数学条纹过于规整，容易显得“假”。真实CRT的扫描线存在微小的间距波动、亮度波动和位置抖动。要模拟这种自然感，可以引入以下随机扰动：

• 间距抖动：T' = T + rand(-0.3, 0.3)，模拟行同步误差。
• 亮度抖动：α' = α × (1 + rand(-0.1, 0.1))，模拟荧光粉不均匀。
• 相位抖动：φ' = φ + rand(-0.5, 0.5)，模拟水平同步漂移。
• 局部缺失：随机跳过若干行，模拟信号丢失。

本文评述：随机扰动是区分“数字条纹”与“模拟扫描线”的关键。但扰动幅度需要精细控制——过大则显得脏乱，过小则无效果。笔者建议间距抖动控制在±10%以内，亮度抖动控制在±15%以内。

五、叠加混合模式的色彩运算原理

5.1 混合模式的基本分类

图像编辑软件中的混合模式（Blend Mode）决定了上层像素与下层像素如何合成。Photoshop将混合模式分为六组：正常组、变暗组、变亮组、对比组、差值组、色彩组。模拟扫描线干扰时，最常用的是对比组中的“叠加”（Overlay）、“柔光”（Soft Light）、“强光”（Hard Light），以及正常组中的“正常”（Normal）配合不透明度。

不同混合模式的数学公式不同，导致最终效果差异显著。理解这些公式，才能精准控制扫描线的视觉强度。

5.2 各混合模式的数学公式

设下层像素值为b（base），上层像素值为s（source），结果值为r，所有值归一化到[0,1]。

混合模式	公式	扫描线效果
正常 Normal	r = s	直接覆盖，硬边明显
正片叠底 Multiply	r = b × s	只压暗，不提亮
滤色 Screen	r = 1 - (1-b)(1-s)	只提亮，不压暗
叠加 Overlay	b<0.5: 2bs; b≥0.5: 1-2(1-b)(1-s)	暗处更暗，亮处更亮
柔光 Soft Light	分段函数，对比度变化温和	自然柔和，推荐首选
强光 Hard Light	s<0.5: 2bs; s≥0.5: 1-2(1-b)(1-s)	对比强烈，适合重口味

从上表可以看出，“叠加”和“强光”的公式结构相似，区别在于判断条件基于b还是s。“柔光”的公式更复杂，但效果最温和。本文评述：对于扫描线干扰，笔者推荐“柔光”作为默认选择，因为它对画面整体亮度的影响最小，同时能保留条纹的可见性。“叠加”适合暗调画面，“正片叠底”适合需要强烈压暗的场景。

5.3 不透明度与混合模式的协同

不透明度α控制上层像素参与合成的比例。最终结果为：

r_final = (1-α) × b + α × r_blend

这意味着不透明度和混合模式是乘法关系。α=0.15配合“柔光”，实际效果非常微弱；α=0.15配合“正常”，则条纹清晰可见。因此，调整时需要同时考虑两个参数。

笔者的经验是：使用“柔光”时α取0.20–0.35；使用“叠加”时α取0.10–0.20；使用“正常”时α取0.05–0.12。这些数值基于1080p分辨率、T=4px的条纹，其他条件下需按比例调整。

5.4 条纹颜色的选择

条纹颜色不一定是黑色。不同颜色会产生不同的色偏效果：

• 纯黑：中性压暗，最通用。
• 深灰（#1a1a1a）：比纯黑柔和，适合亮调画面。
• 深紫（#2d1b4e）：带冷色调，适合赛博朋克风格。
• 深蓝（#0a1628）：模拟CRT蓝光，适合科技感画面。
• 深绿（#0a2818）：模拟老式绿屏显示器。
• 暗红（#2e0a0a）：模拟信号过载，适合故障艺术。

颜色选择应与画面主色调协调。如果画面偏暖，用深紫或深蓝会形成冷暖对比，增强层次感；如果画面偏冷，用深红或深棕则更统一。

六、扫描干扰的合成工作流

6.1 完整工作流概览

将前面各节的方法整合，一个完整的扫描干扰合成工作流包含以下步骤：

1. 准备底图：选择或制作需要叠加干扰的原始画面。
2. 创建条纹层：用贴纸法或画笔法生成条纹图案。
3. 设置混合模式：根据画面调性选择“柔光”或“叠加”。
4. 调整不透明度：从低到高逐步增加，直到效果自然。
5. 添加辅助效果：色差、噪点、暗角、模糊等。
6. 动态化（可选）：添加滚动、闪烁、抖动。
7. 输出与优化：根据输出媒介调整参数，导出。

6.2 辅助效果的叠加顺序

扫描线通常不是孤立存在的，需要与其他效果配合。推荐的图层顺序（从下到上）是：

底图
├── 色差层（Chromatic Aberration）
├── 扫描线层（Scanlines）
├── 噪点层（Noise）
├── 暗角层（Vignette）
├── 闪烁层（Flicker）
└── 全局调整层（Curves/Levels）

这个顺序的逻辑是：先做色彩偏移，再叠加条纹，然后加噪点和暗角，最后做整体调整。闪烁层放在最上面，因为它需要覆盖所有内容。

6.3 色差效果的实现

色差（Chromatic Aberration）是模拟镜头色散或信号色偏的效果，通常表现为红蓝通道的水平偏移。在Photoshop中，可以通过复制底图、分别调整红蓝通道的位置来实现。在Web中，可以用CSS的text-shadow或filter实现：

.glitch-text {
  text-shadow: 
    2px 0 0 rgba(255, 0, 0, 0.5),
    -2px 0 0 rgba(0, 255, 255, 0.5);
}

色差偏移量通常为1–3px。过大则显得刻意，过小则不可见。色差与扫描线叠加时，色差层应在扫描线层下方，因为扫描线是“屏幕”效果，色差是“信号”效果。

6.4 噪点与颗粒感

噪点模拟信号噪声或胶片颗粒。在Photoshop中，使用“滤镜 → 杂色 → 添加杂色”，数量5%–15%，高斯分布，单色。在Web中，可以用SVG的feTurbulence滤镜生成噪点：

<filter id="noise">
  <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4"/>
  <feColorMatrix type="saturate" values="0"/>
</filter>

噪点层的不透明度通常设为5%–10%，混合模式用“叠加”或“柔光”。噪点过多会掩盖扫描线，过少则无质感。

6.5 暗角与屏幕曲面

暗角（Vignette）模拟CRT屏幕边缘亮度衰减。在Photoshop中，用“滤镜 → 镜头校正 → 晕影”或手动绘制径向渐变。在Web中，用radial-gradient：

background: radial-gradient(
  ellipse at center,
  transparent 50%,
  rgba(0, 0, 0, 0.4) 100%
);

暗角强度通常为20%–40%。过强会显得压抑，过弱则无效果。屏幕曲面效果可以通过轻微的桶形畸变（Barrel Distortion）实现，在Photoshop中用“滤镜 → 扭曲 → 球面化”，在Web中用CSS的transform: perspective()配合rotateX。

七、动态扫描干扰的实现方案

7.1 动态化的三种路径

静态扫描线只能营造“截图感”，动态扫描线才能还原“屏幕感”。动态化有三条路径：

• 路径一：CSS动画。用@keyframes控制background-position或transform，实现条纹滚动。优点是简单、性能好；缺点是控制粒度粗。
• 路径二：Canvas/JS。用requestAnimationFrame逐帧重绘，实现精细控制。优点是灵活；缺点是需要处理性能。
• 路径三：WebGL/Shader。用片段着色器实时计算条纹，性能最优，适合全屏效果。缺点是有学习成本。

7.2 CSS动画方案

最简单的动态扫描线用CSS实现：

.scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 2px,
    transparent 2px,
    transparent 4px
  );
  animation: scroll 8s linear infinite;
}
@keyframes scroll {
  from { background-position-y: 0; }
  to { background-position-y: 4px; }
}

这段代码创建了周期4px的条纹，并以8秒一圈的速度滚动。滚动速度不宜过快，否则会产生眩晕感。笔者建议滚动周期在5–15秒之间。

7.3 WebGL着色器方案

对于全屏、高性能的场景，WebGL着色器是最佳选择。以下是一个基础的扫描线片段着色器：

precision mediump float;
uniform float u_time;
uniform vec2 u_resolution;
varying vec2 v_uv;

void main() {
  float T = 4.0;
  float line = step(0.5, fract(v_uv.y * u_resolution.y / T));
  float alpha = 0.15 * line;
  vec3 color = texture2D(u_texture, v_uv).rgb;
  color = mix(color, vec3(0.0), alpha);
  gl_FragColor = vec4(color, 1.0);
}

这个着色器根据屏幕Y坐标计算条纹，并将条纹区域压暗。通过修改u_time可以加入滚动：

float y = v_uv.y * u_resolution.y + u_time * 30.0;
float line = step(0.5, fract(y / T));

WebGL方案的性能优势在大分辨率下尤为明显。根据笔者的测试（模拟数据），在1920×1080分辨率下，Canvas 2D方案每帧约2–4ms，WebGL方案约0.5–1ms。但WebGL的初始化成本较高，适合长时间运行的全屏效果。

7.4 闪烁与抖动效果

除了滚动，扫描线还可以有闪烁和抖动：

• 亮度闪烁：α随时间随机波动，模拟信号不稳定。用sin函数叠加随机噪声实现。
• 位置抖动：条纹整体上下偏移1–2px，模拟行同步抖动。
• 局部撕裂：随机若干行水平偏移，模拟信号撕裂。
• 色带滚动：一条较宽的亮带缓慢从上到下滚动，模拟hum bar。

这些效果可以组合使用，但要注意频率控制。闪烁频率过高（>10Hz）可能引发光敏性癫痫，需谨慎。W3C的WCAG 2.1指南建议闪烁频率不超过3Hz，或闪烁区域面积小于屏幕的25%。

7.5 视频与实时渲染中的实现

在视频编辑软件（Premiere、After Effects、DaVinci Resolve）中，扫描线可以通过调整图层（Adjustment Layer）+ 条纹图案 + 混合模式实现。After Effects中还可以用“时间 → 时间置换”或“表达式”来驱动滚动。

在游戏引擎（Unity、Unreal）中，扫描线通常作为后处理效果（Post-Processing）实现。Unity的Shader Graph有现成的Scanline节点，Unreal的材质编辑器也可以用Frac节点快速搭建。实时渲染的关键是避免每帧重新生成纹理，而是用参数化着色器实时计算。

八、工程实践：性能优化与常见问题

8.1 性能优化策略

扫描线效果虽然视觉简单，但在高分辨率、高刷新率下仍可能成为性能瓶颈。以下是经过验证的优化策略：

优化策略	适用场景	预期收益
使用CSS repeating-linear-gradient	静态/简单动画	零JS开销，GPU合成
Canvas离屏渲染	动态Canvas	减少重绘区域
WebGL全屏Quad	复杂动态效果	GPU并行，帧率稳定
降低条纹图层分辨率	所有场景	减少像素填充率
will-change: transform	CSS动画	提升为合成层
requestAnimationFrame节流	JS动画	避免过度绘制

本文评述：性能优化的核心原则是“能用GPU就不用CPU，能静态就不动态”。大多数场景下，CSS方案已经足够；只有在需要复杂交互或全屏实时效果时，才需要上WebGL。

8.2 常见问题与排查

问题一：条纹出现摩尔纹。原因是条纹周期与屏幕像素网格不匹配。解决方法：将条纹周期设为整数像素，或对条纹图层开启轻微模糊。

问题二：条纹在不同设备上粗细不一。原因是CSS像素与物理像素的缩放关系。解决方法：使用window.devicePixelRatio调整Canvas尺寸，或用CSS的image-rendering: pixelated保持硬边。

问题三：条纹导致文字可读性下降。原因是条纹与文字对比度冲突。解决方法：降低条纹不透明度，或将条纹限制在非文字区域。

问题四：动态条纹引起眩晕。原因是滚动速度过快或闪烁频率过高。解决方法：降低速度至5–15秒/周期，闪烁频率控制在3Hz以下。

问题五：条纹在视频压缩后消失。原因是低对比度细节被压缩算法丢弃。解决方法：提高条纹对比度，或在压缩后重新叠加。

8.3 跨平台适配建议

不同平台的显示特性差异很大，需要针对性调整：

• 桌面浏览器：PPI通常96–160，T=3–5px，α=0.10–0.20。
• 移动端：PPI通常300–500，T=2–3px，α=0.08–0.15。
• 4K显示器：PPI通常140–180，T=4–6px，α=0.12–0.25。
• 印刷品：300ppi，T=8–12px，α=0.15–0.30。
• 视频输出：1080p，T=3–4px，α=0.10–0.18。

这些数值为经验参考（模拟整合数据），实际需根据具体画面和观看条件微调。

九、前沿趋势与跨领域应用

9.1 AI生成与风格迁移

2022年以来，扩散模型（Diffusion Model）在图像生成领域取得突破。Stable Diffusion、Midjourney等工具可以通过提示词生成带有扫描线效果的图像。但AI生成的扫描线存在两个问题：一是参数不可控，二是分辨率受限。笔者认为，AI适合生成“底图”，扫描线仍应由程序化方法叠加，这样才能保证参数精确和可复用。

风格迁移（Style Transfer）是另一个方向。2023年的研究（如StyleGAN-NADA的后续工作）表明，可以将CRT扫描线风格迁移到任意图像上。但这类方法计算成本高，且容易产生伪影，目前更适合研究而非生产。

9.2 VR/AR中的扫描线

在VR/AR中，扫描线效果有特殊价值。一方面，它可以增强“复古屏幕”的沉浸感；另一方面，不当的扫描线会加剧晕动症（Motion Sickness）。2021年后的多项研究表明，在VR中叠加高频扫描线会降低深度感知准确性，但低频扫描线（<1 cycles/degree）影响较小。本文评述：VR中的扫描线设计应遵循“低频、低对比、低动态”原则，避免干扰空间定位。

9.3 数据可视化中的扫描线

扫描线在数据可视化中也有应用。例如，在热力图或频谱图上叠加扫描线，可以增强“仪器感”和“科技感”。但要注意，扫描线不能干扰数据读取。建议将扫描线放在数据图层下方，或使用极低不透明度（α<0.08）。

9.4 实时渲染与游戏引擎

Unity的URP/HDRP和Unreal的Post Process Volume都支持自定义后处理材质。2023年，Unity Asset Store上出现了多个扫描线后处理插件，如“CRT Effect”和“Retro TV”。这些插件通常包含扫描线、色差、噪点、暗角等完整效果，开箱即用。但笔者建议理解底层原理后自行调整，因为插件的默认参数往往不适合所有项目。

9.5 可访问性考量

扫描线效果可能对光敏性癫痫患者造成风险。根据Epilepsy Foundation的建议，闪烁频率应低于3Hz，或闪烁区域面积小于屏幕的25%。此外，扫描线可能降低文字可读性，影响低视力用户。建议提供“关闭效果”的选项，或在检测到prefers-reduced-motion时自动禁用动态效果。

@media (prefers-reduced-motion: reduce) {
  .scanlines { animation: none; }
}

十、总结与参数速查表

10.1 核心要点回顾

本文围绕“横条纹的生成—叠加—动态化”这条主线，系统梳理了扫描线干扰的制作方法。核心要点包括：

• 扫描线的视觉强度受周期、占空比、不透明度、颜色四个参数共同影响。
• 贴纸法适合静态、可复用的场景；画笔法适合动态、随机性强的场景。
• 混合模式中，“柔光”最自然，“叠加”最通用，“正片叠底”适合暗调。
• 动态化优先用CSS，复杂场景用WebGL，避免每帧重绘。
• 性能优化和可访问性是不可忽视的工程约束。

10.2 参数速查表

场景	周期T	占空比D	不透明度α	混合模式
网页背景	4px	0.5	0.08	柔光
海报设计	5px	0.4	0.15	叠加
视频特效	3px	0.5	0.12	柔光
游戏UI	4px	0.5	0.10	叠加
故障艺术	6px	0.3	0.25	强光
移动端	2px	0.5	0.10	柔光

上表为笔者基于工程实践整理的经验参数（模拟整合数据），实际使用时需根据具体画面微调。建议从保守值开始，逐步增加强度，直到效果自然。

10.3 扩展学习资源

以下资源可帮助读者深入理解相关技术：

• MDN Web Docs：CSS