canvas不解析css变量，ctx.fillstyle="var(--primary)"会静默失效为黑色；必须用getcomputedstyle读取并trim()后赋值，且变量变更需手动触发重绘。
Canvas本身完全不解析CSS变量，ctx.fillStyle = "var(--primary)" 会静默失效，最终渲染为黑色或透明——这不是bug，是底层设计决定的。必须通过JavaScript桥接，把CSS变量“算出来”再喂给Canvas上下文。
为什么ctx.fillStyle = "var(--color)"没效果
Canvas 2D渲染上下文（CanvasRenderingContext2D）只接受已计算完成的颜色值，比如"#3b82f6"、"rgb(59, 130, 246)"、"LightGreen"。它不访问样式表，也不执行CSS函数解析：
-
ctx.fillStyle = "var(--accent)"→ 浏览器当作非法颜色字符串，降级为#000000 -
ctx.fillStyle = "--primary-color"→ 同样无效，不是合法颜色语法 -
ctx.fillStyle = "hsl(210, 75%, 50%)"→ Canvas不支持HSL函数写法（除非你用CanvasGradient手动构造）
如何用getComputedStyle安全读取CSS变量值
关键在于：必须从一个**已挂载且样式已计算**的DOM元素上读取，不能读element.style（那只是内联样式），也不能读未生效的:root变量（比如脚本执行太早）。
- 读全局变量：用
getComputedStyle(document.documentElement)，确保:root已就绪 - 读组件级变量：传入该组件的DOM元素（如
document.getElementById("chart")），前提是它自己定义了--bg等变量 - 必须用
.getPropertyValue('--theme-color')，注意两个短横、带引号、不能漏空格 - 返回值总是字符串，且可能带前导/尾随空格，务必
.trim() - 若变量未定义或语法错误，返回
""（空字符串），不是undefined，别用== null判断
读到值后怎么赋给Canvas上下文
读出来的值已经是浏览器计算后的合法颜色字符串，可直接赋给ctx.fillStyle、ctx.strokeStyle、ctx.shadowColor等属性，但要注意几个边界情况：
-
getComputedStyle(el).getPropertyValue('--bg')返回"transparent"→ Canvas支持，没问题 - 返回
"var(--fallback, #fff)"这种嵌套引用 → 不会被解析，仍是字符串，需提前避免或正则清理 - 返回
"inherit"或"unset"→ Canvas无法识别，会变黑，必须兜底，例如：const color = styles.getPropertyValue('--fill').trim() || '#000'; - 若CSS变量是数字（如
--line-width: 2），JS拿到的是"2"，需parseFloat()才能用于ctx.lineWidth
变量变更后Canvas不会自动重绘
CSS变量变化本身不触发Canvas重绘，这是最容易被忽略的一点。即使你用document.documentElement.style.setProperty('--theme', 'dark')改了颜色，Canvas图形仍保持旧样式。
- 必须手动监听变化：可用
MutationObserver监听style属性变更，或在主题切换逻辑里显式调用重绘函数 - 没有“CSS变量change事件”，别指望类似
input那样的原生回调 - 简单场景下，直接在修改变量后立刻调用你的绘图函数即可，例如：
document.documentElement.style.setProperty('--primary', '#ef4444'); redrawChart(); - 复杂应用建议封装一个
syncCanvasWithCSS()函数，集中读取所有相关变量并更新ctx状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
