Canvas不支持直接使用CSS变量，必须通过getComputedStyle().getPropertyValue()获取解析后的颜色值再赋给ctx.fillStyle。
Canvas本身不读CSS变量，直接写--primary-color会静默失效，图形变黑或透明——这不是bug，是设计如此。必须通过getComputedStyle桥接，把变量“算出来”再喂给ctx.fillStyle。
为什么ctx.fillStyle = "var(--accent)"完全没用
Canvas 2D上下文只接受最终解析后的颜色值："#ff6b6b"、"rgb(255, 107, 107)"、"LightGreen"（注意大小写）等。它不解析CSS语法，也不访问样式表。写var(--accent)就像对打印机说“请打印我脑子里想的那个字”——它听不懂。
-
ctx.fillStyle = "--primary-color"→ 静默转成黑色（#000000） -
ctx.fillStyle = "hsl(200, 50%, 60%)"→ 同样无效，Canvas不支持HSL函数 -
ctx.fillStyle = "dark blue"→ 空格分隔的颜色名不被识别，也变黑
正确读取CSS变量的三步操作
核心是用getComputedStyle拿到计算后的真实颜色字符串，再赋值。这个过程不能省略DOM环节。
- 确保目标元素已挂载：传入
document.documentElement可读根变量；若变量定义在某个组件上，得传那个element - 用
getPropertyValue()，不是getComputedStyle(el).--primary-color（语法错误） - 记得
.trim()：返回值可能带前导空格，某些旧版Safari会因此失败
推荐封装成工具函数：
function cssVarToColor(varName, element = document.documentElement) {
return getComputedStyle(element).getPropertyValue(varName).trim();
}
// 使用
ctx.fillStyle = cssVarToColor('--primary-color');
ctx.strokeStyle = cssVarToColor('--border-color', someCardElement);
rgba()变量和alpha通道要注意什么
如果CSS变量本身含透明度，比如--accent: rgba(100, 200, 255, 0.8)，getPropertyValue能完整返回该字符串，Canvas可直接用——但必须是逗号分隔语法。
- ✅
ctx.fillStyle = "rgba(100, 200, 255, 0.8)"—— 兼容所有主流浏览器Canvas实现 - ❌
ctx.fillStyle = "rgba(100 200 255 / 0.8)"—— 新式空格语法，在旧版Safari中渲染为黑色 - ⚠️ alpha范围是0–1，写
80%或0.80（末尾零）都可能出问题，建议统一用一位小数
高频重绘时性能怎么扛住
在requestAnimationFrame里反复调用getComputedStyle是典型性能陷阱：它强制同步布局计算，尤其在复杂DOM中会明显掉帧。
- 静态主题：首次读取后缓存到变量，后续直接复用
- 动态主题：监听
css-vars-updated自定义事件（需自己dispatch），或用MutationObserver监控:rootstyle标签变化，而不是每帧轮询 - 避免在循环内调用：比如绘制100个圆，别在for里每次读一次变量，读一次，存进
fillColor变量，循环里只用它
真正容易被忽略的是缓存时机——很多人以为“变量变了就立刻重绘”，但实际应等transitionend或下一帧稳定后再更新Canvas，否则可能画出过渡中间态的错色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
