用Canvas实现磨砂复古卡带背景需分三层：外层渐变模拟塑料反光，中层噪点模拟磨砂颗粒，底层色偏模拟老化胶体；须按壳体结构建模、多层渐变叠加、全局色偏与局部老化处理，并适配高DPR。
用 Canvas 实现磨砂质感的复古卡带外壳背景，关键不是“堆效果”，而是分层模拟真实物理特性：外层渐变模拟塑料反光、中层噪点模拟磨砂颗粒、底层色偏模拟老化胶体。三者叠加才能出质感，单靠一个径向渐变只会像普通圆角矩形。
1. 复古卡带结构建模：先画壳体再定光影
卡带外壳有明确几何特征：长方体主体 + 左右圆弧卷轴仓 + 中央细长磁带头窗。建议用 beginPath() + arcTo() 或 bezierCurveTo() 绘制带圆角的壳体轮廓（非简单 fillRect），这样后续渐变和噪点才能贴合边缘。
- 主体尺寸参考标准卡带：宽约 100px、高约 63px、圆角半径 8–10px
- 卷轴仓用两个小椭圆（
ellipse()）置于左右两侧，中心略高于主体中线，模拟凸起结构 - 磁带头窗是中央一条窄矩形（约 40×6px），填充略透明深灰（
rgba(40, 40, 50, 0.7)）
2. 磨砂质感核心：多层渐变 + 低饱和噪点
真实磨砂塑料不是均匀哑光，而是有微反光方向性。做法是：
-
底层氛围光：用
createLinearGradient(0, 0, canvas.width, canvas.height)做大范围冷灰→暖灰渐变（如#e0e4e8 → #d5c9c0），globalAlpha = 0.3，模拟环境漫反射 -
中层结构光：在壳体路径内再 fill 一次
createLinearGradient(x0, y0, x1, y1)，方向设为左上→右下（如从 (10, 10) 到 (90, 53)），颜色用低饱和棕灰（#b8a99d → #c9bca3），不透明度 0.6，模拟塑料本体色与光照角度 -
顶层噪点层：用
createImageData()生成 2×2 像素随机灰阶点阵，循环绘制在壳体区域，每个点 alpha 控制在 0.05–0.15 之间，模拟磨砂颗粒感——这是“磨砂”二字的物理依据
3. 复古色调统一：全局色偏 + 局部老化
老卡带塑料会泛黄、边缘氧化。不要只调主色，要加细节偏差：
- 在绘制完所有图层后，用
ctx.globalCompositeOperation = 'color-dodge'覆盖一层极淡米黄（rgba(250, 245, 230, 0.03)）全图，提升暖调基底 - 用
createRadialGradient()在卷轴仓中心添加微弱亮斑（#fffat 0%,transparentat 100%），半径设为 15px，模拟局部反光老化 - 壳体底部边缘加一像素深灰（
#4a4238）描边，强化厚度感，避免“贴纸感”
4. 响应式与高 DPR 适配要点
若用于网页组件，需防缩放失真：
- 所有坐标计算基于
canvas.width / canvas.height（逻辑像素），禁用clientWidth - 噪点图层用
scale(devicePixelRatio, devicePixelRatio)缩放后再绘制，保证颗粒密度一致 - 渐变起止点坐标按 canvas 尺寸同比例缩放，例如原设计 100×63，则
createLinearGradient(0, 0, 100, 63)→ 实际写为createLinearGradient(0, 0, canvas.width, canvas.height)
