Canvas不支持CSS变量、函数色值或非标准颜色名，仅识别W3C定义的140+个大小写敏感的标准颜色名（如"LightGreen"✅、"lightgreen"❌）；rgba()需用逗号分隔语法，且无继承机制，须显式同步。
Canvas里直接用CSS颜色名会失败吗？
不会失败，但有严格限制：只有标准CSS命名颜色（如 "red"、"lightblue"）能被Canvas 2D上下文识别，自定义:root变量、rgb()函数写法、甚至带空格的"dark blue"都会静默转成黑色或透明。
常见错误现象：ctx.fillStyle = "DarkSlateGray" 可以，但 ctx.fillStyle = "--primary-color" 或 ctx.fillStyle = "hsl(200, 50%, 60%)" 完全无效；控制台不报错，图形却没颜色。
使用场景：快速原型、小工具、避免硬编码RGB值时复用设计系统里的语义色名。
- 只认W3C定义的140+个标准名（
"rebeccapurple"也支持） - 大小写敏感：
"LightGreen"✅，"lightgreen"❌（部分浏览器兼容，但别依赖） - 不解析CSS作用域——
getComputedStyle取到的值若含函数或变量，必须先计算再传给Canvas
怎么把CSS变量安全转成Canvas可用的颜色？
不能跳过DOM计算环节。Canvas API不读样式表，只吃最终解析后的颜色字符串（十六进制、rgb()、颜色名）。
立即学习“前端免费学习笔记（深入）”；
实操建议：用getComputedStyle + getPropertyValue拿到计算值，再赋给ctx.fillStyle等属性。
- 确保目标元素已挂载DOM，否则
getComputedStyle返回空字符串 - 推荐写成工具函数：
function cssVarToColor(varName, element = document.documentElement) { return getComputedStyle(element).getPropertyValue(varName).trim(); } - 如果变量本身是
rgb(255, 0, 0)，Canvas可直接用；如果是#ff0000或red，同样有效 - 避免在
requestAnimationFrame高频循环里反复调用getComputedStyle，性能敏感场景应缓存结果
Canvas绘图时用rgba()字符串要注意什么？
Canvas完全支持rgba()字符串，但alpha通道行为和CSS不完全一致：它控制的是“绘制时的不透明度”，不是“图层混合模式”。同一个rgba(0,0,0,0.5)在Canvas里叠画两次，会比一次更暗；而CSS中多个半透元素叠在一起，视觉叠加逻辑不同。
参数差异：ctx.fillStyle = "rgba(0, 0, 0, 0.3)"合法，但ctx.fillStyle = "rgba(0 0 0 / 0.3)"（新式空格分隔语法）不被所有浏览器Canvas实现支持，尤其旧版Safari。
- 老式逗号分隔写法兼容性更好：
"rgba(255, 128, 0, 0.7)" - alpha值范围是0–1，不是0–100；写
50%会直接失效 - 如果颜色来自CSS变量且含alpha（如
--accent: rgba(100, 200, 255, 0.8)），getPropertyValue能正确返回该字符串，Canvas可直用
跨技术复用颜色时最容易漏掉的一件事
Canvas没有“当前color”概念，不继承父元素文本色。哪怕你在<canvas></canvas>外设了color: var(--text-primary)，Canvas内部ctx.fillStyle也不会自动同步这个值。
这意味着：CSS变量复用必须显式拉取，不能靠样式继承；颜色字符串一旦生成，就和CSS运行时脱钩——改了CSS变量，Canvas不会自动重绘。
所以真正容易被忽略的点是：颜色同步必须搭配机制，比如监听mutationObserver监测:root变化，或在主题切换时手动触发Canvas重绘逻辑。不处理这点，看似复用了，实际只是快照。
