Canvas不解析CSS变量，ctx.fillStyle = "var(--accent)"会静默失效并渲染为黑色或透明；必须用getComputedStyle().getPropertyValue()获取计算后的颜色值（如"#3b82f6"）再赋值，且需注意trim、兜底和手动重绘。
Canvas 2D上下文根本不解析CSS变量，写 ctx.fillStyle = "var(--primary-color)" 会静默变成黑色或透明——这不是bug，是设计如此。
为什么 ctx.fillStyle = "var(--accent)" 完全没用
Canvas绘图上下文只接受最终计算出的颜色值，比如 "#3b82f6"、"rgb(59, 130, 246)" 或标准色名 "LightGreen"（注意大小写）。它不访问样式表，也不执行CSS语法解析。写 "var(--accent)" 就像往打印机里塞一张写着“请画我刚想的那个圆”的纸——它没这个能力。
常见静默失败现象：
-
ctx.fillStyle = "--primary-color"→ 渲染为黑色#000000 -
ctx.fillStyle = "hsl(200, 50%, 60%)"→ 无效，变黑（Canvas不支持HSL函数） -
ctx.fillStyle = "dark blue"→ 空格分隔的组合名不被识别，也变黑
怎么安全读取并使用CSS变量颜色
必须通过 getComputedStyle 拿到计算后的字符串值，再赋给 ctx.fillStyle。这个桥接步骤不可跳过，且依赖DOM存在。
立即学习“前端免费学习笔记（深入）”；
- 目标元素得已挂载：读根变量用
document.documentElement；读组件内变量就得传那个真实<div class="chart">元素 - 必须用
.getPropertyValue("--accent")，不是.--accent（语法错误） - 返回值要
.trim()：某些浏览器（尤其是旧版Safari）会带前导空格，导致解析失败 - 如果变量回退链里含
var(--base, #000)或color-mix()，getPropertyValue可能返回未计算表达式——这时你得兜底，比如|| "#000"
动态响应CSS变量变化时容易踩的坑
CSS变量变了，Canvas不会自动重绘。没有绑定机制，只有手动触发。
- 别在
window.matchMedia的change回调里直接查getComputedStyle——此时CSS变量可能还没完成级联更新，拿到的是旧值 - 更可靠的做法：用
document.documentElement.getAttribute("data-theme")或预存布尔状态（如isDarkMode），所有绘制逻辑基于该状态分支 - 高频重绘（如
requestAnimationFrame）中，getComputedStyle调用要缓存，避免性能抖动 - RGBA字符串（如
"rgba(59, 130, 246, 0.8)"）Canvas能直接用，但alpha行为和CSS不同：Canvas里是“本次绘制操作的不透明度”，连续两次填充同一区域会叠加变暗
系统色（如 "CanvasText"）为什么不能信
写 ctx.fillStyle = "CanvasText" 看似跨平台，实际结果不可控：
- Windows上可能是
#333，macOS上可能是#1e1e1e，深色模式切换后也不会自动更新 - Canvas不实现CSS系统色语义，它只是把字符串当未知色名处理，最终 fallback 到黑色
- 真正需要主题适配时，应统一走
data-theme+ 显式色值映射，而不是依赖系统色名
最常被忽略的一点：Canvas与CSS是两个独立的颜色空间，即使你拿到了完全一样的RGB字符串，sRGB色彩管理、设备DPR缩放、抗锯齿策略都会让最终像素表现不同——这不是同步问题，是模型差异。
