canvas不解析css变量，ctx.fillstyle="var(--primary-color)"会静默回退为黑色或透明；必须用getcomputedstyle(document.documentelement).getpropertyvalue('--primary-color').trim()获取计算值并缓存复用，否则主题切换后颜色不会更新。
Canvas 画布本身不继承 CSS 变量，必须手动读取并应用，否则颜色不会随主题切换而更新。
为什么 var(--primary-color) 在 Canvas 中完全无效
Canvas 的 ctx.fillStyle 等属性只接受具体颜色值（如 #3b82f6、rgb(59, 130, 246) 或 hsl(...)），不解析 CSS 函数。写 ctx.fillStyle = 'var(--primary-color)' 就等于设了个非法字符串，浏览器会静默 fallback 到 #000 或透明，图形可能直接消失。
- CSS 变量作用于渲染层，Canvas 是位图绘制层，两者无自动同步机制
-
getComputedStyle是唯一可靠读取渠道，但必须指定元素（通常用document.documentElement） - 伪类、媒体查询触发的变量变化，不会自动通知 Canvas；必须由 JS 主动感知并重绘
如何安全读取并缓存 CSS 变量值
每次绘制都调用 getComputedStyle 会强制同步布局，严重拖慢动画帧率。正确做法是只在主题切换或初始化时读一次，存为 JS 变量复用。
- ✅ 正确：
const root = document.documentElement;<br>const primaryColor = getComputedStyle(root).getPropertyValue('--primary-color').trim();<br>// 后续直接用 primaryColor - ❌ 错误：在
requestAnimationFrame循环里反复调用getComputedStyle(root).getPropertyValue(...) - 务必
.trim()—— Safari 返回值带空格，不清理会导致ctx.fillStyle失效 - 读取后立即检查是否为空：
if (!primaryColor) { ctx.fillStyle = '#3b82f6'; }，避免静默失败
Canvas 尺寸与主题颜色叠加时的常见冲突
当 Canvas 被放在 Flex 或 Grid 容器中，且同时要响应主题色变化时，两个问题会互相干扰：尺寸缩放和颜色同步不同步，导致糊图或错色。
- 仅改
canvas.style.width是 CSS 缩放，不影响ctx绘图分辨率，颜色对了图却模糊 - 仅改
canvas.width/canvas.height不重绘，上次内容残留，新颜色也刷不上 - ResizeObserver 回调里可安全读变量，但别重复读同一变量——应提前缓存好
primaryColor等值 - 如果主题切换触发重排（比如改了根字体大小），需监听
resize或themechange事件，主动清空并重绘 Canvas
真正麻烦的不是读变量，而是确保 Canvas 在主题切换后立刻重绘——很多人只改了 CSS 变量，却忘了调用 ctx.clearRect() 和重新绘制逻辑，结果颜色没变、图形还卡在旧状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
