Spotify Wrapped 无法用纯 HTML+CSS 实现，因其依赖 OAuth 数据接口、Canvas 动态绘图、IntersectionObserver 视差滚动及 JS 实时更新渐变色；本地 file:// 协议下 fetch 跨域失败，iOS Safari 中 toBlob() 可能静默报错，年度色值需从封面实时提取并 fallback，数字动画须 requestAnimationFrame 分帧渲染。
Spotify Wrapped 页面本质是高度定制化的单页应用，不是纯静态 HTML 能还原的——直接用 div 堆样式、靠 CSS 动画硬套视觉效果，90% 会卡在数据动态渲染、渐变色响应、滚动视差和分享图生成这四点上。
为什么纯 HTML + CSS 做不出真正的 Wrapped 效果
Spotify Wrapped 的核心不是“长得像”，而是“数据驱动的个性化呈现”。它依赖：用户真实播放统计（需 OAuth 接口）、Canvas 动态生成分享图、IntersectionObserver 控制视差滚动、CSS 自定义属性配合 JS 实时更新渐变色 stops。纯 HTML 文件本地双击打开时，fetch 会因跨域失败，canvas.toBlob() 在某些 iOS Safari 版本会静默报错，而所有“年度色值”都是根据 top track 的专辑封面主色实时计算出来的——这些根本没法写死。
- 本地
file://协议下，fetch('/api/me/top/tracks')直接触发net::ERR_FAILED - 所谓“背景色流动”其实是用
background: linear-gradient(...)+ JS 每帧更新style.setProperty('--grad-stop-1', '#ff416c') - “唱片旋转”动画必须用
transform: rotateZ()+will-change: transform，否则在低端安卓机上掉帧明显
canvas.toDataURL('image/png') 在 Wrapped 分享图生成中必踩的坑
Spotify 分享图是带阴影、圆角、文字描边、多层叠加的 PNG，但 Canvas 绘制时字体加载、跨域图片、DPR 适配三者不处理好，导出的就是模糊或空白图。
- 用
document.fonts.load('700 24px "Circular", sans-serif')等待字体就绪再绘文字，否则 iOS 上文字直接不显示 - 专辑封面图必须加
crossOrigin="anonymous"属性，且服务器要返回Access-Control-Allow-Origin: *，否则ctx.drawImage(img, ...)报SecurityError - 高 DPI 屏幕（如 MacBook Retina）需按
window.devicePixelRatio缩放 canvas 宽高，再用 CSS 缩回原始尺寸，否则图糊 - 别用
toDataURL()——它有 10MB 大小限制且 base64 编码体积膨胀 33%，改用canvas.toBlob(callback, 'image/png', 0.95)
如何让“年度色值”真正随数据变化（而不是写死 #1DB954）
Spotify 的主色从来不是固定绿色，而是从你 top track 封面提取的 dominant color，再通过 HSL 调整饱和度与明度得到的。本地模拟时可用 node-vibrant 或浏览器端 color-thief，但要注意：
立即学习“前端免费学习笔记（深入）”；
-
ColorThief.getPalette()返回的是 RGB 数组，得转成十六进制再塞进style.setProperty('--accent', '#ff6b6b') - 取色前务必等图片
onload，否则返回空数组；用img.decode()可避免闪白 - 如果用户 top track 封面全是灰调（比如爵士黑胶扫描图），
getDominantColor()会返回接近#888，这时应 fallback 到 Spotify 官方色板中的次级色（如#FF5500），不能硬用 - 别在 CSS 里写
background: var(--accent) radial-gradient(...)—— 这会导致渐变起点被覆盖，正确写法是background: radial-gradient(circle at 20% 30%, var(--accent), #00000000)
最常被忽略的一点：Wrapped 页面所有“数字”（播放次数、分钟数、歌曲数）都带数字滚动动画，但直接用 innerText = count 会触发 layout thrashing。必须用 requestAnimationFrame 分帧更新，且数字变化要加 easing（如 cubic-bezier(0.34, 1.56, 0.64, 1)），否则看起来像卡顿计数器。
