css变量需解析为具体颜色值才能用于canvas，直接赋值会失败；getcomputedstyle读取未挂载元素或未生效变量返回空或原始字符串；rgba()需兼容分隔符与小数alpha；系统色名在canvas中不可靠且不响应主题变化；色空间差异导致渲染不一致。
CSS变量无法直接赋给Canvas上下文，必须先解析为最终颜色值再使用。
getComputedStyle 读取CSS变量时返回空或无效值
常见错误现象：getComputedStyle(el).getPropertyValue("--primary") 返回空字符串或 "var(--fallback)"，导致 ctx.fillStyle 静默设为黑色或透明。
- 确保目标元素已挂载到DOM，且CSS变量已在该元素或其祖先上定义（
el不能是document.createElement("div")未插入的节点） - 避免读取未生效的动态变量：比如在CSS尚未注入、或媒体查询未匹配时调用，
getPropertyValue不会等待样式计算完成 - 若变量定义为
color-mix(in srgb, red 30%, blue)或oklch(60% 0.2 270)等新语法，浏览器可能返回原始函数字符串，Canvas不识别
rgba() 字符串传入Canvas后alpha行为与CSS不一致
从CSS变量中拿到的 "rgba(100, 150, 200, 0.6)" 可以直接赋给 ctx.fillStyle，但效果不同：Canvas中该alpha控制的是本次绘制的“覆盖强度”，连续两次填充同一区域会叠加变暗；而CSS中两个半透层叠是合成结果。
- 高频绘制（如
requestAnimationFrame）中不要每次都调用getComputedStyle，缓存解析结果 - 注意分隔符兼容性：
"rgba(100, 150, 200, 0.6)"✅，"rgba(100 150 200 / 0.6)"❌（Safari 15.6以下、部分安卓WebView不支持） - alpha必须是小数，
"rgba(0,0,0,50%)"会失效，变成默认黑色
系统色（如 CanvasText）在Canvas中不可靠
ctx.fillStyle = "CanvasText" 看似跨平台，实则行为不一致：Windows下可能是 #333，macOS深色模式下可能是 #e6e6e6，且切换主题后Canvas不会自动更新。
- 不要依赖系统色名做主题适配，改用明确的CSS变量 + 主动监听
prefers-color-scheme - 监听示例：
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", updateCanvasColors) - 深色模式下从
:root读取的--text-primary若定义为CanvasText，Canvas里画出来只是静态快照，不是实时映射
真正麻烦的不是怎么取值，而是颜色空间和绘图模型差异——Canvas只认sRGB，且所有绘制都是位图叠加；CSS变量背后可能是display-p3、oklab或自定义色彩空间，一旦涉及色域转换，结果就不可控。别指望“一致”是默认行为，得自己对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
