getComputedStyle 读不到 CSS 变量值是因为变量未“落地”，需确保元素已挂载、CSS 已注入、读取时机在样式计算完成后；rgba() 字符串传给 ctx.fillStyle 颜色异常是因 Canvas 与 CSS 渲染模型不同且格式兼容性差；主题切换后需主动重绘，高频绘制时应缓存变量值并配合重绘逻辑更新。
getComputedStyle 读不到 CSS 变量值怎么办
常见错误现象：
getComputedStyle(document.documentElement).getPropertyValue("--primary")</p>
<p>返回空字符串或 <code>"var(--fallback)"，接着 ctx.fillStyle 静默变成黑色。根本原因不是 JS 写错了，而是变量没“落地”——元素未挂载、CSS 尚未注入、或读取时机太早（比如在 DOMContentLoaded 前执行）。
必须确保三件事同时成立：
- 目标元素已插入 DOM（
document.documentElement是最稳妥的选择） - CSS 变量已在该元素或其祖先上通过
:root或内联style定义 - 读取发生在样式计算完成之后（推荐放在
DOMContentLoaded回调或requestAnimationFrame第一帧）
兜底写法示例：
const root = document.documentElement;
const color = getComputedStyle(root).getPropertyValue('--primary').trim() || '#3b82f6';注意：用 == null 判断会失效，因返回的是空字符串 ""，不是 null 或 undefined。
rgba() 字符串传给 ctx.fillStyle 为什么颜色不对
从 CSS 变量里拿到的 "rgba(100, 150, 200, 0.6)" 能被 Canvas 接收，但视觉效果常和 CSS 不一致。这不是 bug，是底层模型差异：Canvas 的 alpha 控制单次绘制的“覆盖强度”，连续两次填充同一区域会叠加变暗；而 CSS 中两个半透层叠是合成结果。
立即学习“前端免费学习笔记（深入）”；
还要注意格式兼容性：
-
"rgba(100, 150, 200, 0.6)"✅ 所有主流浏览器支持 -
"rgba(100 150 200 / 0.6)"❌ Safari 15.6 以下、部分安卓 WebView 不识别 -
"rgba(0,0,0,50%)"❌ alpha 必须是小数，百分比写法直接失效，ctx.fillStyle回退为黑色
若不确定输入格式是否安全，可加一层校验：
function isValidRgba(str) {
return /^rgba\(\d+,\s*\d+,\s*\d+,\s*(0|0?\.\d+)\)$/.test(str);
}
主题切换后 Canvas 颜色不更新
Canvas 不监听 CSS 变量变化，document.documentElement.style.setProperty("--primary", "#1e40af") 后，已绘制的内容不会自动重绘。真正麻烦的不是“怎么取值”，而是“谁来触发重绘”。
正确做法是主动监听并响应：
- 监听深色模式：
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", redraw) - 监听自定义事件（如组件内部 dispatch 的
themechange） - 在重绘函数中先
ctx.clearRect(0, 0, canvas.width, canvas.height)，再用新颜色重绘全部图形
别只改变量、不调 redraw()——这是最常被忽略的一步，结果就是颜色“看起来没变”，其实是旧图还留在画布上。
高频绘制时反复读 CSS 变量导致卡顿
在 requestAnimationFrame 循环里每帧都调用 getComputedStyle，会强制触发同步布局（layout thrashing），严重拖慢帧率。Canvas 本身不缓存变量值，JS 层必须自己做。
推荐方案是“一次读取、多次复用”：
- 初始化或主题变更时读取并缓存：
const primaryColor = getComputedStyle(root).getPropertyValue('--primary').trim(); - 后续所有
ctx.fillStyle = primaryColor直接用变量，不查 DOM - 如果变量依赖媒体查询（如
@media (prefers-reduced-motion)），需在对应媒体查询变化时重新读取并更新缓存
真正容易被忽略的是：缓存值必须配合重绘逻辑一起更新。只更新变量、不触发重绘，等于没做任何事。
