Canvas无法直接使用CSS变量，需通过JavaScript调用getComputedStyle()从已渲染的DOM元素读取计算后的变量值（如"#3b82f6"），trim()后赋给ctx.fillStyle等属性，并做好空值兜底；变量变更不会自动触发重绘，须手动监听+重绘。
Canvas里不能直接用CSS变量，但JS可以读取并转成颜色值
Canvas的2D绘图上下文（ctx）完全不解析CSS，--primary-color这种自定义属性对ctx.fillStyle毫无意义。真正能用的，是JavaScript从元素上读出CSS变量的计算值，再手动赋给Canvas上下文。
关键点在于：必须指定一个有样式的DOM元素作为“桥梁”，比如<canvas id="my-canvas"></canvas>本身，或一个隐藏的<div>——只要它在文档流中、样式已生效，就能用<code>getComputedStyle()读到变量值。
- 不能读
style属性（element.style.setProperty()设的不算“计算后”的值） - 必须等CSSOM就绪，比如放在
DOMContentLoaded之后，或requestAnimationFrame第一帧 - 如果变量未定义或语法错误，
getComputedStyle(el).getPropertyValue('--xxx')返回空字符串，需兜底
用getComputedStyle读取并转换为合法Canvas颜色值
读出来的CSS变量值是字符串，比如"#3b82f6"、"rgb(59, 130, 246)"、"hsl(210, 75%, 50%)"，这些Canvas都能直接接受；但如果是"var(--primary)"嵌套引用或"transparent"，就得小心处理。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext('2d');
const el = canvas; // 或 document.documentElement
const style = getComputedStyle(el);
const primary = style.getPropertyValue('--primary-color').trim();
const bgColor = primary || '#ffffff'; // 兜底色
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
-
trim()必须加——浏览器可能返回带空格的值，如" #3b82f6 " - 别用
style.color这类简写属性读CSS变量，只认getPropertyValue() - RGBA值如
"rgba(59, 130, 246, 0.8)"可直接传给fillStyle，Canvas原生支持
动态响应CSS变量变化？得靠MutationObserver或重绘触发
CSS变量变，Canvas不会自动重绘。没有“绑定”机制，只能手动监听+重绘。最轻量的方式是：把变量变更和重绘逻辑封装成函数，在需要时调用。
如果真要监听:root或某元素的样式变更（比如主题切换），可用MutationObserver监听style属性变化，但注意：它**不监听CSS文件加载或媒体查询生效**，只捕获setAttribute('style', ...)这类显式修改。
- 监听
class切换更可靠（例如document.body.classList.toggle('dark')后，主动读新变量） - 避免在
requestAnimationFrame里高频读取getComputedStyle，性能敏感场景应缓存结果 - 服务端渲染（SSR）时
getComputedStyle返回空，需预设默认值或延迟执行
为什么不用CSS.supports('color', 'var(--x)')？它没用
CSS.supports()判断的是CSS引擎是否支持某条声明，不是用来读值的。传'var(--x)'永远返回true（现代浏览器都支持var()语法），但它不告诉你--x有没有被定义，也不返回实际值。
真正有用的判断是运行时读值后校验：
const val = getComputedStyle(el).getPropertyValue('--accent').trim();
if (!val || val === 'initial' || val === 'inherit') {
console.warn('CSS variable --accent is unset or invalid');
ctx.strokeStyle = '#6b7280';
} else {
ctx.strokeStyle = val;
}
复杂点在于：CSS变量可以链式引用（--a: var(--b); --b: red;），但getPropertyValue()返回的是最终计算值，不用自己展开。容易被忽略的是——如果变量定义在@media块里且当前不匹配，它就不可见，读出来仍是空字符串。
