canvas不解析css变量，ctx.fillstyle = "var(--primary)"会静默失效并变黑；必须用getcomputedstyle().getpropertyvalue('--var').trim()读取并校验，再赋值，且变量变更需手动重绘。
Canvas本身不解析CSS变量，ctx.fillStyle = "var(--primary)"会静默失效、图形变黑——这不是bug，是设计如此。必须靠JavaScript桥接，把CSS变量“算出来”再喂给Canvas。
为什么ctx.fillStyle = "var(--theme-color)"没颜色
Canvas 2D上下文只接受最终计算后的颜色字符串："#3b82f6"、"rgb(59, 130, 246)"、"LightGreen"（注意大小写）。它不访问样式表，也不执行var()函数解析：
-
ctx.fillStyle = "var(--accent)"→ 浏览器当作非法值，降级为#000000 -
ctx.fillStyle = "hsl(210, 75%, 50%)"→ Canvas不支持HSL语法 -
ctx.fillStyle = "dark blue"→ 空格分隔的颜色名不被识别（"DarkBlue"才有效）
用getComputedStyle().getPropertyValue()安全读取变量值
必须从一个已挂载、样式已生效的DOM元素上读取，不能读element.style，也不能在DOMContentLoaded前调用：
- 读全局变量：用
getComputedStyle(document.documentElement)，确保:root已就绪 - 读组件级变量：传入该元素（如
document.getElementById("chart")），前提是它自己定义了--bg等变量 - 必须用
.getPropertyValue('--theme-color')，不是.style.--theme-color（语法错误） - 返回值总是字符串，但可能带前导/尾随空格或换行，务必
.trim()，否则旧版Safari会静默失败 - 变量未定义时返回
""（空字符串），不是undefined，别用== null判断
赋值前必须做格式校验和兜底
读到的值虽已计算，但仍可能含无效内容，Canvas对非法格式静默降级为黑色：
-
"transparent"✅ Canvas支持 -
"inherit"❌ 不识别，图形变黑，需手动兜底 -
"var(--fallback, #fff)"❌ 嵌套var()不会被解析，仍是字符串 -
"rgba(255 128 0 / 0.7)"❌ 新式空格分隔语法在旧版Safari和部分安卓WebView中不支持 - 建议统一用逗号分隔写法：
"rgba(255, 128, 0, 0.7)" - 兜底写法：
const color = getComputedStyle(el).getPropertyValue('--primary').trim() || '#000'
变量变更后Canvas不会自动重绘
CSS变量更新（如深色模式切换）不会触发Canvas重绘，必须手动监听并触发绘制逻辑：
- 监听系统主题：
matchMedia('(prefers-color-scheme: dark)')可捕获变化 - 监听自定义事件或
MutationObserver（用于动态注入的变量） - 重绘前应缓存已读颜色值，避免在
requestAnimationFrame高频循环里反复调用getComputedStyle - 最易被忽略的是：变量值可能合法但语义错位——比如
--border-width被误读为颜色，Canvas不会报错，只会渲染异常
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
