Canvas不解析CSS变量，必须用getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim()获取计算值并缓存复用；直接赋值var(--primary-color)会静默回退为黑色或透明，且主题切换后需手动重绘。
Canvas不认CSS变量，必须用getComputedStyle桥接
直接写 ctx.fillStyle = "var(--primary-color)" 不会报错，但会静默 fallback 到黑色或透明——Canvas 2D 上下文根本不解析 CSS 函数。它只接受最终计算后的颜色字符串，比如 "#3b82f6"、"rgb(59, 130, 246)" 或标准色名 "LightGreen"（注意大小写）。所以你不能跳过 DOM 层，必须靠 getComputedStyle 把变量“算出来”。
读取时务必指定元素并 .trim()，否则 Safari 会失效
常见错误是传错目标元素，或忽略返回值里的空格。正确做法是：
- 读全局变量（定义在
:root）：用document.documentElement - 读组件级变量（如
<div id="chart" style="--bg: #1e293b">）：必须传document.getElementById("chart")，不能只读根节点 - 一定要链式调用
.getPropertyValue('--primary-color').trim()——Safari 旧版对前导空格极其敏感，不.trim()就等于设了个空字符串，ctx.fillStyle直接变黑 - 兜底判断别用
== null，因为未定义变量返回的是空字符串""，建议写成const color = getComputedStyle(root).getPropertyValue('--primary').trim() || '#000'
别在 requestAnimationFrame 里反复读，缓存才是关键
每次调用 getComputedStyle 都可能触发强制同步布局，动画帧率会断崖式下跌。真正该做的，是在主题切换或初始化时读一次，存成 JS 变量复用：
- ✅ 正确：
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim();，后续所有ctx.fillStyle = primaryColor - ❌ 错误：在
requestAnimationFrame循环里反复执行getComputedStyle(...).getPropertyValue(...) - 监听主题变化要用
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ...)或自定义themechange事件，触发后更新缓存值 + 调用ctx.clearRect()+ 重绘整帧
rgba() 和色空间差异会让“一致”变成幻觉
即使你拿到了 "rgba(100, 150, 200, 0.6)" 并成功赋给 ctx.fillStyle，视觉上仍可能和同值 CSS 元素不一致：
立即学习“前端免费学习笔记（深入）”；
- Canvas 中 alpha 控制的是本次绘制的“覆盖强度”，连续两次填充同一区域会叠加变暗；CSS 是图层合成，行为不同
- 分隔符兼容性差：
"rgba(100, 150, 200, 0.6)"✅，"rgba(100 150 200 / 0.6)"❌（Safari 15.6 以下不支持） - alpha 必须是小数，
"rgba(0,0,0,50%)"会静默失败 - 如果 CSS 变量背后是
oklch()或color-mix()等新语法，getPropertyValue()可能返回原始函数字符串，Canvas 完全无法识别
